回前頁

圖片下載時間偵測(IMG onload 事件的利用)

為何要偵測圖片下載時間？
這真是個好問題，不過我不打算答覆，因為答案可以很單純，也可以很複雜。單純的 就是想讓瀏覽者知道，從 Server 下載一張圖片到自己的瀏覽器裏要多久的時間； 複雜的話，可以用做從單一 Client 點，聯到不同的 Web Server 時，速度的比較， 從而決定如何導引瀏覽者的瀏覽動線。至於本範例，只是在實測圖片下載時間應該如何 偵測而已，如何延伸利用，就看身為網頁設計師的你了。
IMG 元件的 onload 事件
在 Internet Explorer 和 Netscape 中，IMG 標籤都可以設定 onload 事件偵測 屬性，功能是當我們開始下載一張新圖片後，Browser 開始依我們給的圖片 URL 去 下載圖片，到這張圖片整個下載完成後，Browser 就會傳遞一個完成工作的通知， 這就是 onload 事件的作用。譬如我們可以這麼安排 HTML： 
<IMG SRC="圖片檔 URL" onload="處理下載完成的 Srcipt 敘述;">
onload 事件利用的第一個構想
當我們掌握這些基本特性後，我們很直覺的會想，那就用 Script 在開始載入 圖片時宣告一個 Date() 變數，並取得下載前的系統時間，再在 IMG onload 時用 另一個 Date() 變數，去取得下載完成後的系統時間，然後用新 Date() 去減舊 Date() ，就是下載圖片所花的時間。初一看，這個構想不錯，但稍為對使用 DHTML 熟悉的設計師就會看出漏洞，因為 onload 事件只會在圖片下載完成後才會產生， 萬一因為網路大塞車，或者 Web Server 癱瘓，導致圖片始終無法下載完成，那麼 onload 事件是永遠不會產生，也就是你永遠無法取得下載後的 Date()，這個 構想也就失敗了。
設定下載等待的時間
所以為了兼顧圖片可能下載成功，也可能不成功的兩種狀況，我們必須為 圖片下載設定一個最大等待的時間，超過了這個等待時間，我們就放棄圖片的繼續下載 ，並將下載失敗的狀況回傳。要做到這一點，我們必須在 Script 中宣告時間驅動器 的使用。譬如我們可以在 Script 中這樣宣告時間驅動器的使用： 
var timerObj=setInterval("圖片下載是否完成之檢查函數()",間隔毫秒數);

/* setInterval 參數的意義：
   第一個參數表示此一時間驅動器固定要執行的 Script 函數，格式是函數名稱
   尾部加 () 成對圓括弧，並用 "" 字元前後包夾。
   第二個參數表示間隔多少毫秒執行此設定函數一次，格式為數值。 */
圖片下載檢查函數要安排什麼動作
既然我們使用了時間驅動器定時執行圖片下載狀況檢查，接著我們就得在 Script 中安排此一能檢查圖片下載狀況的函數以供時間驅動器 timerObj 的呼叫。在 圖片下載檢查函數中我們首先要檢查圖片下載完成了沒有，怎麼檢查呢？就回到我們 一開始提的 IMG onload 事件，先把 Code 列出再解說： 
<SCRIPT>
    var ready=false;
</SCRIPT>

<BODY>
    <IMG SRC="圖片檔 URL" onload="ready=true;">
</BODY>
上面的用意就是宣告一個 ready 變數做為註標，一開始先設定為偽值，等到 IMG 標籤的圖片下載完成後，就把 ready 變數改為真值。因為有了 ready 這個註標， 我們就可以執行下列的 Script： 
function 圖片下載檢查函數()
{
    /* 如果圖片下載完成註標為真，那麼就終止時間驅動器 timerObj 的使用，
       並且離開本函數。 */
    if (ready)
    {
        clearInterval(timerObj);
        return;
    }

    /* ready 為假時本函數繼續判斷的其他敘述 ...... */
}
在檢查函數第二個要做的動作就是看看下載等待時間是否超過，這同樣可以宣告一個 時間記錄變數來解決，例如： 
var calc=0;

function 圖片下載檢查函數()
{
    /* 下載時間超過指定之最大等待時間，那麼就放棄此一偵測，
       並終止時間驅動器 timerObj 的使用。 */
    if (calc > 最大等待時間) {clearInterval(timerObj);}
    /* 時間記錄值加 1 */
    calc++;
}
如何啟動 IMG 元件的圖片下載
一般 IMG 標籤的圖片下載，都是利用 HTML 的 SRC 屬性指明圖片 URL，和網頁 的內容同時下載，但因為同時下載兩種資料，時間計算就非常難控制，所以在測試 圖片下載時間時，應該採用網頁內容和圖片分開下載，也就是先下載網頁本文，等本文 完全下載完畢後，再用呼叫 Script 函數的方式，開始啟動 IMG 圖片下載，並計算 下載時間。要在 Script 中啟動 IMG 元件的圖片下載，必須在 HTML 中設定 NAME 屬性，以利 Script 中呼叫，譬如說本範例的 IMG 標籤 HTML 是如此設定： 
<IMG NAME="loadbox" ...... >
那麼就可以在 Script 用下面敘述去啟動 IMG 圖片的下載： 
document.images.loadbox.src="新圖片的 URL";
而取消 IMG 圖片的下載的 Script 敘述則如下： 
document.images.loadbox.src=null;
範例測試

以上就是本範例設計原理大概，接下來就是本範例的測試，本範例只安排美媚和辣媚 兩張圖片，三級媚實際上是不存在的圖片。一方面是測試無法下載圖片的處理動作， 一方面是本站倒底不是成人網站，老怪可沒膽子去觸犯中華民國法律，如果因此讓你 大失所望，還請多原諒。

請在右側選擇載入之圖片：


下載訊息框：
        圖片載入盒
本範例的原始碼

以下是本範例原始碼去除說明部份，留下圖片下載相關的 HTML 和 Script。 

<HTML>
<HEAD>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
/* checker:時間計數器物件宣告
   calc:計數器經過秒數記錄
   ready:下載完成與否之註標變數 */
var checker,calc,ready;
/* 是否可再次載入圖片之控制變數 */
var startcheck=false;

/* 開始載入圖片 */
function StartLoading()
{
    /* 如果網頁沒有正在執行圖片載入功能 */
    if (!startcheck)
    {
        /* 註明網頁正下載圖片中，避免瀏覽者另載圖片。 */
        startcheck=true;

        /* 秒數記錄器歸零 */
        calc=0;

        /* 將註標改為尚未完成載入圖片 */
        ready=false;

        document.forms.form1.elements.loadmessage.value="!!請稍待圖片下載!!";

        /* 開始執行下載圖片自訂函數 */
        LoadPicture();

        /* 宣告時間計數器，並 1000 毫秒執行圖片下載是否完成之
           自訂測試函數一次。 */
        checker=setInterval("PicLoadCheck(30)",1000);
    }
}

/* 行圖片下載是否完成測試函數
   參數 max 表最大等待秒數 */
function PicLoadCheck(max)
{
    /* 圖片下載狀況顯示訊息變數 */
    var str;

    /* 如果時間計數超過最大等待秒數，就把 ready=true ，宣告放棄訊息。 */
    if (calc > max) {str="!!下載圖片時間已超過 "+calc+" 秒，\n下載終止!!";
        ready=true;document.images.loadbox.src=null;}
        else {str="下載圖片完成，\n費時 "+calc+" 秒。";}

    /* 如果圖片下載註標被 IMG loadbox 通知完成，或逾時被宣告放棄。 */
    if (ready)
    {
        /* 宣告終止時間計數器 checker 的使用 */
        clearInterval(checker);

        /* 開放圖片再次下載功能 */
        startcheck=false;

        /* 顯示此次圖片下載的訊息 */
        document.forms.form1.elements.loadmessage.value=str;
    }
    /* 時間記錄加 1 */
    calc++;
}

/* 依 SELECT BOX sel1 的選項決定載入那張圖片 */
function LoadPicture()
{
    /* 消去原圖片 */
    document.images.loadbox.src=null;

    var URL;
    var elem=document.forms.form1.elements.sel1;

    /* 用迴圈逐一檢查每選項是否被選取 */
    for (var i=0;i<elem.length;i++)
    /* 用 URL 變數取得 OPTION 選項中圖片位址的 value 值 */
    {if (elem[i].selected) {URL=elem[i].value;break;}}
    /* 載入新圖片 */
    document.images.loadbox.src=URL;
}
// -->
</SCRIPT>
</HEAD>
<BODY>

<H4 ALIGN=CENTER>圖片下載時間偵測(IMG onload 事件的利用)</H4>

    <FORM NAME="form1">
        請在右側選擇載入之圖片：<BR>
    <SELECT NAME="sel1" onchange="StartLoading()">
        <OPTION VALUE="00080000.gif">無媚</OPTION>
        <OPTION VALUE="00080001.jpg">美媚</OPTION>
        <OPTION VALUE="00080002.jpg">辣媚</OPTION>
        <OPTION VALUE="00080003.jpg">三級媚</OPTION>
    </SELECT><BR><BR>
    下載訊息框：<BR>
    <TEXTAREA NAME="loadmessage" COLS=22 ROWS=3>
    </TEXTAREA>
    </FORM>
    <IMG NAME="loadbox" SRC="00080000.gif" ALT="圖片載入盒" WIDTH=150
     HEIGHT=200 BORDER=1 onload="ready=true;">
     <!-- IMG loadbox 在 onload(下載完成)事件發生時將註標變數 ready=true
          的用意是通知計數器圖片下載已完成。 // -->

</BODY>
</HTML>
回前頁
1