圖片預(yù)加載是web開發(fā)中一種應(yīng)用相當廣泛的技術(shù)隅肥，比如我們在做圖片翻轉(zhuǎn)顯示等特效的時候祖秒，為了讓圖片在轉(zhuǎn)換的時候不出現(xiàn)等待颅筋，我們最好是先讓圖片下載到本地慈参，然后在繼續(xù)執(zhí)行后續(xù)的操作。
function preloadimages(arr){
? ? var newimages=[]
? ? var arr=(typeof arr!="object")? [arr] : arr? //確保參數(shù)總是數(shù)組
? ? for (var i=0; i
? ? ? ? newimages[i]=new Image()
? ? ? ? newimages[i].src=arr[i]
? ? }
}
我們可以通過如下的方式加載我們想要的圖片
preloadimages(['1.gif', '2.gif', '3.gif'])
上面的方法已經(jīng)可以滿足我們最基本的預(yù)加載圖片的效果了涩蜘，但情況往往并不如此嚼贡，我們往往需要確切的知道圖像是否被真正加載完成，并可能在后續(xù)執(zhí)行一系列對圖片的操作功能同诫。幸運的是粤策，這個功能實現(xiàn)起來并不難，我們可以使用onload和onerror事件去處理決定圖片是否加載完成（或者失斘蠼选）叮盘。在本文的最終實現(xiàn)代碼中，我們將會把proloadimages()函數(shù)改造成如下的樣子霹俺。
preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){
//當圖片全部加載完成之后柔吼，執(zhí)行此處的代碼
//images參數(shù)是Array類型，對應(yīng)加載進來的圖像
//images[0] 對應(yīng)的是第一張圖像
})
首先我們用image對象的onload和onerror事件處理函數(shù)來檢測圖片的加載情況（成功或失敱蟆）愈魏，改造后的代碼如下。
function preloadimages(arr){
? ? var newimages=[], loadedimages=0
? ? var arr=(typeof arr!="object")? [arr] : arr
? ? function imageloadpost(){
? ? ? ? loadedimages++
? ? ? ? if (loadedimages==arr.length){
? ? ? ? ? ? alert("圖片已經(jīng)加載完成")
? ? ? ? }
? ? }
? ? for (var i=0; i
? ? ? ? newimages[i]=new Image()
? ? ? ? newimages[i].src=arr[i]
? ? ? ? newimages[i].onload=function(){
? ? ? ? ? ? imageloadpost()
? ? ? ? }
? ? ? ? newimages[i].onerror=function(){
? ? ? ? imageloadpost()
? ? ? ? }
? ? }
}
我們可以使用代碼2的調(diào)用方法測試該函數(shù)想际，當圖片全部加載完成（成功或失斉嗦）后，瀏覽器將會彈出“圖片已經(jīng)加載完成”的消息胡本。
現(xiàn)在牌柄，我們將為preloadimages()函數(shù)增加一個回調(diào)函數(shù)來處理后續(xù)的操作
通常我們會為我們的preloadimages()函數(shù)增加一個匿名函數(shù)做為參數(shù)，來完成我們需要的功能侧甫。如此之后珊佣，我們調(diào)用preloadimages()函數(shù)的代碼可能會如下面這樣。
preloadimages(imagesarray, function(){
//圖片加載完成之后執(zhí)行的操作
})
但是我們現(xiàn)在來做一點點改變披粟，讓代碼看起來更直觀咒锻，更易于理解，改造完成之后僻爽，preloadimages()函數(shù)的調(diào)用看起來如下所示。
preloadimages(imagesarray).done(function(){
//圖片加載完成后的操作
})
上面這種寫法大家一看一定都會覺得非常清晰明了贾惦，那么接下來胸梆，我們繼續(xù)來改造我們的preloadimages()函數(shù)敦捧。
function preloadimages(arr){
var newimages=[], loadedimages=0
var postaction=function(){}? //此處增加了一個postaction函數(shù)
var arr=(typeof arr!="object")? [arr] : arr
function imageloadpost(){
loadedimages++
if (loadedimages==arr.length){
postaction(newimages) //加載完成用我們調(diào)用postaction函數(shù)并將newimages數(shù)組做為參數(shù)傳遞進去
}
}
for (var i=0; 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函數(shù)兢卵，該函數(shù)被用來做為圖片加載完成后的回調(diào)函數(shù)，用戶可以在后面調(diào)用的時候用自己的處理函數(shù)覆蓋掉該函數(shù)绪颖。
第二秽荤，我們的preloadimages()函數(shù)返回了一個空對象，其中包含一個簡單的done()方法柠横，這是實現(xiàn)本次改造的關(guān)鍵所在窃款，確保了鏈式調(diào)用的實現(xiàn)。
最后牍氛，我們的調(diào)用變?yōu)槿缦滦问?/p>
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()里實現(xiàn)各種我們需要的圖片操作！
?
