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

'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;