HTML5 canvas之圖片批量加載

        使用JS實現一組圖片動畫效果或者使用HTML5 Canvas渲染一系列圖片等案例中，需要圖片全部加載完成方可運行動畫效果。此時程序中就會涉及多張圖片預加載代碼。當接二連三的案例中都涉及圖片預加載時，就需要考慮把這個功能封裝爲一個通用方法。

 

（1）下面爲JS實現圖片預加載方法loadImages()：

 

//實現一系列圖片的預加載
//參數sources:圖片信息關聯數組
//參數callback:回調函數——圖片預加載完成後立即執行此函數。
function loadImages(sources, callback){
    var count = 0,
        images ={},
        imgNum = 0;
    for(src in sources){
        imgNum++;
    }
    for(src in sources){
        images[src] = new Image();
        images[src].onload = function(){
            if(++count >= imgNum){
                callback(images);
            }
        }
        images[src].src = sources[src];
    }
}

//實現一系列圖片的預加載
//參數sources:圖片信息關聯數組
//參數callback:回調函數——圖片預加載完成後立即執行此函數。
function loadImages(sources, callback){
    var count = 0,
        images ={},
        imgNum = 0;
    for(src in sources){
        imgNum++;
    }
    for(src in sources){
        images[src] = new Image();
        images[src].onload = function(){
            if(++count >= imgNum){
                callback(images);
            }
        }
        images[src].src = sources[src];
    }
}

 

（2）在JS中調用預加載函數：

 

//存儲圖片鏈接信息的關聯數組
var sources = {
    ietoHell : ”img/IEtoHell.jpg”,
    fuckIE : ”img/fuckIE.jpg”
 };

//調用圖片預加載函數，實現回調函數
 loadImages(sources, function(images){
//TO-DO something
    ctx.drawImage(images.ietoHell, 20,20,100,100);
    ctx.drawImage(images.fuckIE, 140,20,100,100);
 });

//存儲圖片鏈接信息的關聯數組
var sources = {
    ietoHell : "img/IEtoHell.jpg",
    fuckIE : "img/fuckIE.jpg"
 };

//調用圖片預加載函數，實現回調函數
 loadImages(sources, function(images){
//TO-DO something
    ctx.drawImage(images.ietoHell, 20,20,100,100);
    ctx.drawImage(images.fuckIE, 140,20,100,100);
 });

 

注意事項：

 

（1）先綁定image.onload事件，後加載圖片

 

images[src] = new Image();
images[src].onload = function(){
    if(++count >= imgNum){
        callback(images);
    }
}
images[src].src = sources[src];

images[src] = new Image();
images[src].onload = function(){
    if(++count >= imgNum){
        callback(images);
    }
}
images[src].src = sources[src];

        原因：如果圖片從緩存中加載，速度非常快以至於沒來得及綁定事件就加載完畢，自然不會觸發綁定事件。

 

（2）for…in循環 與 for循環的區別

        for循環用於迭代數組（array）

        for…in循環用於迭代對象（object, {}）或者關聯數組（hash array）