資訊專欄INFORMATION COLUMN
摘要：在項目中常常需要用到的圖片預加載效果。幸運的是，這個功能實現(xiàn)起來并不難，我們可以使用和事件去處理決定圖片是否加載完成或者失敗?，F(xiàn)在，我們將為函數(shù)增加一個回調函數(shù)來處理后續(xù)的操作。如此之后，我們調用函數(shù)的代碼可能會如下面這樣。
在web項目中常常需要用到的圖片預加載效果。
下面的函數(shù)實現(xiàn)了一個我們想要的最基本的圖片預加載效果
function preloadimages(arr){
var newimages=[]
var arr=(typeof arr!="object")? [arr] : arr //確保參數(shù)總是數(shù)組
for (var i=0; i
我們可以通過如下的方式加載我們想要的圖片：
preloadimages(["1.gif", "2.gif", "3.gif"])
上面的方法已經可以滿足我們最基本的預加載圖片的效果了，但情況往往并不如此，我們往往需要確切的知道圖像是否被真正加載完成，并可能在后續(xù)執(zhí)行一系列對圖片的操作功能。幸運的是，這個功能實現(xiàn)起來并不難，我們可以使用onload和onerror事件去處理決定圖片是否加載完成（或者失?。Ｔ诒疚牡淖罱K實現(xiàn)代碼中，我們將會把proloadimages()函數(shù)改造成如下的樣子。
preloadimages(["1.gif", "2.gif", "3.gif"]).done(function(images){
//當圖片全部加載完成之后，執(zhí)行此處的代碼
//images參數(shù)是Array類型，對應加載進來的圖像
//images[0] 對應的是第一張圖像
})
首先我們用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("圖片已經加載完成")
}
}
for (var i=0; i
我們可以使用代碼2的調用方法測試該函數(shù)，當圖片全部加載完成（成功或失?。┖?，瀏覽器將會彈出“圖片已經加載完成”的消息。
現(xiàn)在，我們將為preloadimages()函數(shù)增加一個回調函數(shù)來處理后續(xù)的操作。
通常我們會為我們的preloadimages()函數(shù)增加一個匿名函數(shù)做為參數(shù)，來完成我們需要的功能。如此之后，我們調用preloadimages()函數(shù)的代碼可能會如下面這樣。
preloadimages(imagesarray, function(){
//圖片加載完成之后執(zhí)行的操作
})
但是我們現(xiàn)在來做一點點改變，讓代碼看起來更直觀，更易于理解，改造完成之后，preloadimages()函數(shù)的調用看起來如下所示。
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函數(shù)并將newimages數(shù)組做為參數(shù)傳遞進去
postaction(newimages)
}
}
for (var i=0; i
上面的代碼，我們稍作修改了幾個地方：
首先，我們增加了一個postaction函數(shù)，該函數(shù)被用來做為圖片加載完成后的回調函數(shù)，用戶可以在后面調用的時候用自己的處理函數(shù)覆蓋掉該函數(shù)。
第二，我們的preloadimages()函數(shù)返回了一個空對象，其中包含一個簡單的done()方法，這是實現(xiàn)本次改造的關鍵所在，確保了鏈式調用的實現(xiàn)。
最后，我們的調用變?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)各種我們需要的圖片操作！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/78106.html
摘要：所有依賴這個模塊的語句，都定義在一個回調函數(shù)中，等到加載完成之后，這個回調函數(shù)才會運行。 1.模塊的寫法 模塊化編程一般都有這么幾個過渡過程，如下描述。 原始方法 function m1(){ //... } function m2(){ //... } 上面的函數(shù)m1()和m2()，組成一個模塊。使用的時候，直接調用就行了。 這種做法的缺點很明顯：污染了全局變量，無法保證不與...
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...
摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...
閱讀 1826·2021-11-24 09:39
閱讀 1759·2021-11-22 15:22
閱讀 1071·2021-09-27 13:36
閱讀 3423·2021-09-24 10:34
閱讀 3410·2021-07-26 23:38
閱讀 2687·2019-08-29 16:44
閱讀 1021·2019-08-29 16:39
閱讀 1182·2019-08-29 16:20
