Javascript實現圖片的預先載入的完整實現

標籤：情況   覆蓋   i++   函數   var   一點   顯示   轉換   完整   

圖片預先載入是web開發中一種應用相當廣泛的技術，比如我們在做圖片翻轉顯示等特效的時候，為了讓圖片在轉換的時候不出現等待，我們最好是先讓圖片下載到本地，然後在繼續執行後續的操作。今天我們將來實現一個完整的圖片預先載入和處理圖片載入後執行後續操作的代碼。

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

 

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()函數返回了一個Null 物件，其中包含一個簡單的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()裡實現各種我們需要的圖片操作！

 

 

 

 

 

 

 

 

Javascript實現圖片的預先載入的完整實現