圖片預載入模塊

前言

在一個應用中，通常會有很多圖片，眾所周知，載入圖片需要時間，在圖片沒有載入出來之前，頁面會是空白，為了提升用戶體驗，應用的開發人員使出渾身解數，其中最為常見的就是在圖片沒有載入完成之前，有一個載入動畫。這裡用到的技術主要是圖片預載入。圖片預載入的原理並不難，當給一個Image對象設置src屬性後，圖片就開始載入。給Image對象指定事件要位於設置src屬性之前。

涉及到的內容

1.需要預載入的圖片並不僅僅只是一張，通常將所有圖片的信息保存在一個數組或者對象中，為了載入所有的圖片，需要遍歷出所有的圖片。

2.當所有圖片載入完後，又要接著執行其他的任務，這需要一個回調函數。

3.記錄已經完成載入的圖片數量，並實時的反應到頁面上。

編碼開始

註：html和css省略，主要講解js文件

1.為了代碼復用，我將圖片預載入相關的代碼封裝在imageloader.js模塊中，並暴露出一個介面。

2.入口文件是index.js，入口文件的代碼如下：

var loadImage = require('./imageloader.js');
loadImage(['./img/rabbit-big.png','./img/face_slogan.png','./img/footer.png'],finish);
//finish是一個所以圖片完成載入之後執行的回調函數
function finish(){
        document.body.innerHTML = '完成載入'
    }

3.imageloader.js模塊代碼入下：

'use strict';

/**
 * 預載入圖片的函數
 * @param elem 顯示載入進度的元素
 * @param images 載入圖片的數組或者對象
 * @param callback 全部圖片載入完畢後調用的回調函數
 * @param timeout 載入超時的時長
 */
function loadImage(elem,images,callback,timeout){
    //遍歷出圖片的計數器
    var count = 0;
    //預設全部圖片都能成功載入
    var success = true;
    //超時timer的id
    var timerId = 0;
    //預設不會載入超時
    var isTimeout = false;
    //已經載入完成的長度
    var loaded = 0;

    //對圖片數組（或對象）進行遍歷
    for(var key in images){
        //過濾掉prototype上的屬性
        if(!images.hasOwnProperty(key)){
            continue;
        }
        //獲得每個圖片元素
        //期望每個圖片元素是一個object：{src:XXX}
        var item = images[key];
        if(typeof item === "string"){
            item = images[key] = {
                src:item
            }
        }
        //如果格式不滿足期望，則進行下一次遍歷
        if(!item || !item.src){
            continue;
        }
       //計算+1
         ++ count;
        //設置圖片元素的id
        item.id = '__img__' + key + getId();
        //設置圖片元素的image，它是一個image對象
        item.image = window[item.id] = new Image();

        doLoad(item);
    }
    //如果計數為0，則直接調用callback
    if(!count){
       callback(success);
    }else if(timeout){//如果設置了最長載入時間
        timerId = setTimeout(onTimeout,timeout)
    }
    /**
     * 真正進行圖片預載入的函數
     * @param item 圖片元素的對象
     */
    function doLoad(item){
        item.state = 'loading';

        var img = item.image;
        //圖片載入成功的一個回調函數
        img.onload = function(){
            //只要有一張出現載入失敗，success就會為false
            success = success & true;
            item.state = 'load';
            loaded ++;
            done();

        };
        //圖片載入失敗的回調函數
        img.onerror = function(){
            success = false;
            item.state = 'error';
            loaded ++;
            done();
        };
        //載入圖片
        img.src = item.src;
        /**
         * 每張圖片載入完成的回調函數，不論成功還是失敗
         */
        function done(){
            //清除綁定的事件
            img.onload = null;
            img.onerror = null;
            try{
               delete window[item.id]
            }catch (e){

            }
            elem.innerHTML = '已載入' + (loaded / count * 100) + '%';
            //當所有圖片載入完成並且沒有超時的情況，清除定時器，且執行回調函數
            if(count === loaded && !isTimeout){
                clearTimeout(timerId);
                callback(success);
            }
        }
    }

    /**
     * 超時函數
     */
    function onTimeout(){
        isTimeout = true;
        success = false;
        callback(success);
    }

}

var __id = 0;
function getId(){
   return ++ __id;
}
module.exports = loadImage;

4.我使用的是webpack進行打包，如果你對打包還不熟悉，可以點擊這兒