在很多情況下需要快速的顯示圖片到頁面上。但是圖片載入是需要一定時間的。

這樣就需要對圖片進行預載入工作。

關鍵是img的onload事件與complete屬性。

onload是圖片載入完成執行的事件，complete屬性是圖片顯示出來以後為true。

那麼在onload之前complete肯定是false的，這個毋庸置疑。那麼我們就可以在onload事件內部判斷complete屬性是否為true。

如果為true那麼代表圖片真正的載入成功，否則可以重新載入。

上面是實現思路，接下來我們寫一個小demo：

var l =5;
var Images = new Array(l);
var ImgLoaded 
 
=0;

//設定載入佇列
function LoadImgs()
{
    for(var i=0;i<Images.length;i++){
        Images[i]=new Image();
        downloadImage(i);
    }
}

//載入單個圖片檔案
function downloadImage(i)
{
    var imageIndex = i+1; //圖片以1開始
Images[i].src = "images/"+imageIndex+".jpg";
    Images[i].onLoad=validateImages(i);
}

//驗證是否成功載入完成，如不成功則重新載入
 
function validateImages(i){
    if (!Images[i].complete)
    {
        window.setTimeout('downloadImage('+i+')',200);
    }
    else if (typeof Images[i].naturalWidth != "undefined" && Images[i].naturalWidth == 0)
    {
        window.setTimeout('downloadImage('+i+')',200);
    }
    else
{
        ImgLoaded
 
++
        if(ImgLoaded == l)
        {
            alert('圖片載入完畢！');
        }
    }
}

LoadImgs();//在目錄內images資料夾下模擬1-5.jpg，或者修改地址也可以。