圖片預加載是web開發中一種應用相當廣泛的技術，比如我們在做圖片翻轉顯示等特效的時候，為了讓圖片在轉換的時候不出現等待，我們最好是先讓圖片下載到本地，然后在繼續執行后續的操作。今天我們將來實現一個完整的圖片預加載和處理圖片加載后執行后續操作的代碼。
下面的函數實現了一個我們想要的最基本的圖片預加載效果
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]
}
}
我們可以通過如下的方式加載我們想要的圖片
上面的方法已經可以滿足我們最基本的預加載圖片的效果了，但情況往往並不如此，我們往往需要確切的知道圖像是否被真正加載完成，並可能在后續執行一系列對圖片的操作功能。幸運的是，這個功能實現起來並不難，我們可以使用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()函數。
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[0].src+" "+images[0].width) // alerts '1.gif 220'
})
當然，我們還可以在done()里實現各種我們需要的圖片操作！