圖片預加載是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];} }

?

上面的方法已經可以滿足我們最基本的預加載圖片的效果了，但情況往往并不如此，我們往往需要確切的知道圖像是否被真正加載完成，并可能在后續執行一系列對圖片的操作功能。

幸運的是，這個功能實現起來并不難，我們可以使用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 = [];var 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();};} }

?

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

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

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

?

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

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

?

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

function preloadimages(arr){var newimages = [];var 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(fun){postaction = fun || postaction;}} }

?

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

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

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

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

preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){alert(images.length); //alerts 3 });

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

轉載于:https://www.cnblogs.com/minigrasshopper/p/8065694.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JS 实现图片的预加载（转载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。