JS進階篇--實現圖片的預加載詳解

pkwenda 發布于2019-08-19 14:46 / 1645人閱讀

摘要：在項目中常常需要用到的圖片預加載效果。幸運的是，這個功能實現起來并不難，我們可以使用和事件去處理決定圖片是否加載完成或者失敗。現在，我們將為函數增加一個回調函數來處理后續的操作。如此之后，我們調用函數的代碼可能會如下面這樣。

在web項目中常常需要用到的圖片預加載效果。

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

function preloadimages(arr){
    var newimages=[]
    var arr=(typeof arr!="object")? [arr] : arr  //確保參數總是數組
    for (var i=0; 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
我們可以使用代碼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
上面的代碼，我們稍作修改了幾個地方： 
首先，我們增加了一個postaction函數，該函數被用來做為圖片加載完成后的回調函數，用戶可以在后面調用的時候用自己的處理函數覆蓋掉該函數。
第二，我們的preloadimages()函數返回了一個空對象，其中包含一個簡單的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()里實現各種我們需要的圖片操作！

云服務器 GPU云服務器 js實現圖片預加載 js實現數據的懶加載圖片進階篇 webrtc進階信令篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78106.html

JS進階篇--RequireJS模塊化編程詳解

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。 1.模塊的寫法模塊化編程一般都有這么幾個過渡過程，如下描述。原始方法 function m1(){ 　　//... } function m2(){ 　　//... } 上面的函數m1()和m2()，組成一個模塊。使用的時候，直接調用就行了。這種做法的缺點很明顯：污染了全局變量，無法保證不與...

妤鋒シ 2019-08-20 16:37 評論0 收藏0
CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0