[轉]Javascript實現圖片的預加載詳解

下面的函數實現了一個我們想要的最基本的圖片預加載效果

function preloadimages(arr){ var newimages=[] var arr=(typeof arr!="object")? [arr] : arr  //確保參數總是數組
    for (var i=0; i<arr.length; i++){ newimages[i]=new Image() newimages[i].src=arr[i] } }

 我們可以通過如下的方式加載我們想要的圖片

preloadimages(['1.gif', '2.gif', '3.gif'])

上面的方法已經可以滿足我們最基本的預加載圖片的效果了，但情況往往並不如此，我們往往需要確切的知道圖像是否被真正加載完成，並可能在后續執行一系列對圖片的操作功能。幸運的是，這個功能實現起來並不難，我們可以使用onload和onerror事件去處理決定圖片是否加載完成（或者失敗）。在本文的最終實現代碼中，我們將會把proloadimages()函數改造成如下的樣子。

preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){ //當圖片全部加載完成之后，執行此處的代碼
 //images參數是Array類型，對應加載進來的圖像
 //images[0] 對應的是第一張圖像
})

 首先我們用image對象的onload和onerror事件處理函數來檢測圖片的加載情況（成功或失敗），改造后的代碼如下。

  
function preloadimages(arr){ var newimages=[], loadedimages=0
    var arr=(typeof arr!="object")? [arr] : arr function imageloadpost(){ loadedimages++
        if (loadedimages==arr.length){ alert("圖片已經加載完成") } } for (var i=0; i<arr.length; i++){ newimages[i]=new Image() newimages[i].src=arr[i] newimages[i].onload=function(){ imageloadpost() } newimages[i].onerror=function(){ imageloadpost() } } }

我們可以使用代碼2的調用方法測試該函數，當圖片全部加載完成（成功或失敗）后，瀏覽器將會彈出“圖片已經加載完成”的消息。

現在，我們將為preloadimages()函數增加一個回調函數來處理后續的操作

通常我們會為我們的preloadimages()函數增加一個匿名函數做為參數，來完成我們需要的功能。如此之后，我們調用preloadimages()函數的代碼可能會如下面這樣。

preloadimages(imagesarray, function(){ //圖片加載完成之后執行的操作
})

但是我們現在來做一點點改變，讓代碼看起來更直觀，更易於理解，改造完成之后，preloadimages()函數的調用看起來如下所示。

preloadimages(imagesarray).done(function(){ //圖片加載完成后的操作
})

 上面這種寫法大家一看一定都會覺得非常清晰明了，那么接下來，我們繼續來改造我們的preloadimages()函數。

function preloadimages(arr){ var newimages=[], loadedimages=0
    var postaction=function(){}  //此處增加了一個postaction函數
    var arr=(typeof arr!="object")? [arr] : arr function imageloadpost(){ loadedimages++
        if (loadedimages==arr.length){ postaction(newimages) //加載完成用我們調用postaction函數並將newimages數組做為參數傳遞進去
 } } for (var i=0; i<arr.length; i++){ newimages[i]=new Image() newimages[i].src=arr[i] newimages[i].onload=function(){ imageloadpost() } newimages[i].onerror=function(){ imageloadpost() } } return { //此處返回一個空白對象的done方法
        done:function(f){ postaction=f || postaction } } }

 上面的代碼，我們稍作修改了幾個地方： 

首先，我們增加了一個postaction函數，該函數被用來做為圖片加載完成后的回調函數，用戶可以在后面調用的時候用自己的處理函數覆蓋掉該函數。

第二，我們的preloadimages()函數返回了一個空對象，其中包含一個簡單的done()方法，這是實現本次改造的關鍵所在，確保了鏈式調用的實現。

最后，我們的調用變為如下形式

 preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){ alert(images.length) //alerts 3
  alert(images[0].src+" "+images[0].width) //alerts '1.gif 220'
})

 當然，我們還可以在done()里實現各種我們需要的圖片操作！

轉載地址：http://www.cnblogs.com/mz121star/archive/2012/11/01/javascript_preloadimages.html