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

'use strict';

/**
 * 預(yù)加載圖片的函數(shù)
 * @param elem 顯示加載進(jìn)度的元素
 * @param images 加載圖片的數(shù)組或者對象
 * @param callback 全部圖片加載完畢后調(diào)用的回調(diào)函數(shù)
 * @param timeout 加載超時的時長
 */
function loadImage(elem,images,callback,timeout){
 //遍歷出圖片的計數(shù)器
 var count = 0;
 //默認(rèn)全部圖片都能成功加載
 var success = true;
 //超時timer的id
 var timerId = 0;
 //默認(rèn)不會加載超時
 var isTimeout = false;
 //已經(jīng)加載完成的長度
 var loaded = 0;

 //對圖片數(shù)組（或?qū)ο螅┻M(jìn)行遍歷
 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
 }
 }
 //如果格式不滿足期望，則進(jìn)行下一次遍歷
 if(!item || !item.src){
 continue;
 }
 //計算+1
 ++ count;
 //設(shè)置圖片元素的id
 item.id = '__img__' + key + getId();
 //設(shè)置圖片元素的image，它是一個image對象
 item.image = window[item.id] = new Image();

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

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

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

 }
 elem.innerHTML = '已加載' + (loaded / count * 100) + '%';
 //當(dāng)所有圖片加載完成并且沒有超時的情況，清除定時器，且執(zhí)行回調(diào)函數(shù)
 if(count === loaded && !isTimeout){
 clearTimeout(timerId);
 callback(success);
 }
 }
 }

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

}

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