[轉]Javascript實現圖片的預加載的完整實現

時間 2019-12-04

原文原文鏈接

圖片預加載是web開發中一種應用至關普遍的技術，好比咱們在作圖片翻轉顯示等特效的時候，爲了讓圖片在轉換的時候不出現等待，咱們最好是先讓圖片下載到本地，而後在繼續執行後續的操做。今天咱們未來實現一個完整的圖片預加載和處理圖片加載後執行後續操做的代碼。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事件處理函數來檢測圖片的加載狀況（成功或失敗），改造後的代碼以下。post

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()函數增長一個回調函數來處理後續的操做spa

一般咱們會爲咱們的preloadimages()函數增長一個匿名函數作爲參數，來完成咱們須要的功能。如此以後，咱們調用preloadimages()函數的代碼可能會以下面這樣。code

preloadimages(imagesarray, function(){
//圖片加載完成以後執行的操做
})

可是咱們如今來作一點點改變，讓代碼看起來更直觀，更易於理解，改造完成以後，preloadimages()函數的調用看起來以下所示。對象

preloadimages(imagesarray).done( function(){
//圖片加載完成後的操做
})

上面這種寫法你們一看必定都會以爲很是清晰明瞭，那麼接下來，咱們繼續來改造咱們的preloadimages()函數。blog

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
        }
    }
}