圖片預(yù)加載是web開(kāi)發(fā)中一種應(yīng)用相當(dāng)廣泛的技術(shù)，比如我們?cè)谧鰣D片翻轉(zhuǎn)顯示等特效的時(shí)候，為了讓圖片在轉(zhuǎn)換的時(shí)候不出現(xiàn)等待，我們最好是先讓圖片下載到本地，然后在繼續(xù)執(zhí)行后續(xù)的操作。

下面的函數(shù)實(shí)現(xiàn)了一個(gè)我們想要的最基本的圖片預(yù)加載效果。

function preloadimages(arr){var newimages = [];var arr = (typeof arr != "object") ? [arr] : arr; // 確保參數(shù)總是數(shù)組for(var i=0; i<arr.length; i++){newimages[i] = new Image();newimages[i].src = arr[i];} }

?

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

幸運(yùn)的是，這個(gè)功能實(shí)現(xiàn)起來(lái)并不難，我們可以使用onload和onerror事件去處理決定圖片是否加載完成（或者失敗）。在本文的最終實(shí)現(xiàn)代碼中，我們將會(huì)把proloadimages()函數(shù)改造成如下的樣子。

preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){//當(dāng)圖片全部加載完成之后，執(zhí)行此處的代碼//images參數(shù)是Array類型，對(duì)應(yīng)加載進(jìn)來(lái)的圖像//images[0]對(duì)應(yīng)的是第一張圖像 });

?

首先我們用image對(duì)象的onload和onerror事件處理函數(shù)來(lái)檢測(cè)圖片的加載情況（成功或失敗），改造后的代碼如下。

function preloadimages(arr){var newimages = [];var loadedimages = 0;var arr = (typeof arr != "object") ? [arr] : arr;function imageloadpost(){loadedimages++;if(loadedimages == arr.length){alert("圖片已經(jīng)加載完成");}}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();};} }

?

現(xiàn)在，我們將為preloadimages()函數(shù)增加一個(gè)回調(diào)函數(shù)來(lái)處理后續(xù)的操作。

通常我們會(huì)為preloadimages()函數(shù)增加一個(gè)匿名函數(shù)做為參數(shù)，來(lái)完成我們需要的功能。如此之后，我們調(diào)用preloadimages()函數(shù)的代碼可能會(huì)如下面這樣。

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

?

但是我們現(xiàn)在來(lái)做一點(diǎn)點(diǎn)改變，讓代碼看起來(lái)更直觀，更易于理解，改造完成之后，preloadimages()函數(shù)的調(diào)用看起來(lái)如下所示。

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

?

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

function preloadimages(arr){var newimages = [];var loadedimages = 0;var postaction = function(){}; // 此處增加了一個(gè)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ù)傳遞進(jìn)去 }}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{ // 此處返回一個(gè)空白對(duì)象的done方法 done: function(fun){postaction = fun || postaction;}} }

?

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

首先，我們?cè)黾恿艘粋€(gè)postaction函數(shù)，該函數(shù)被用來(lái)做為圖片加載完成后的回調(diào)函數(shù)，用戶可以在后面調(diào)用的時(shí)候用自己的處理函數(shù)覆蓋掉該函數(shù)。

第二，我們的preloadimages()函數(shù)返回了一個(gè)空對(duì)象，其中包含一個(gè)簡(jiǎn)單的done()方法，這是實(shí)現(xiàn)本次改造的關(guān)鍵所在，確保了鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)。

最后，我們的調(diào)用變?yōu)槿缦滦问?/span>

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

當(dāng)然，我們還可以在done()里實(shí)現(xiàn)各種我們需要的圖片操作！

轉(zhuǎn)載于:https://www.cnblogs.com/minigrasshopper/p/8065694.html

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。