今天和大家探討canvas動畫框架之圖片預加載，如上圖的進度條，這可不是假的進度條，是真正能夠實時獲取圖片加載進度的進度條。

為什么想要做這個進度條呢？canvas需要進度條么？答案顯然是肯定的。我們的頁面如果放到服務器上，圖片的下載將是相當漫長的一個過程。如果我們不進行預加載就開始執行動畫的話，那么用戶肯定看不到理想的效果。

那么我們就來看看canvas圖片預加載的實現（此處參考了網上一段代碼，來源：http://hi.baidu.com/jqz880321/item/fba0a210593b748489a9566c）

/*star  
 *loading模塊  
 *實現圖片的預加載，并顯示進度條  
 *參數：圖片數組對象，加載完成的回調函數  
 */  
function loadImages(sources,callback){      
    var loadedImages = 0;      
    var numImages = 0;    
    ctx.font='14px bold';  
    ctx.lineWidth=5;  
    var clearWidth=canvas.width;  
    var clearHeight=canvas.height;  
    // get num of sources      
    for (var src in sources) {      
        numImages++;      
    }      
    for (var src in sources) {      
        images[src] = new Image();  
        //當一張圖片加載完成時執行      
        images[src].onload = function(){   
            //重繪一個進度條  
            ctx.clearRect(0,0,clearWidth,clearHeight);  
            ctx.fillText('Loading:'+loadedImages+'/'+numImages,200,280);  
            ctx.save();  
            ctx.strokeStyle='#555';  
            ctx.beginPath();  
            ctx.moveTo(200,300);  
            ctx.lineTo(600,300);  
            ctx.stroke();  
            ctx.beginPath();  
            ctx.restore();  
            ctx.moveTo(200,300);  
            ctx.lineTo(loadedImages/numImages*400+200,300);    
            ctx.stroke();  
            //當所有圖片加載完成時，執行回調函數callback  
            if (++loadedImages >= numImages) {      
                callback();      
            }      
        };    
        //把sources中的圖片信息導入images數組    
        images[src].src = sources[src];      
    }      
}      
//定義預加載圖片數組對象，執行loading模塊  
window.onload = function(){      
    var sources = {      
        PaperBoy1: "images/run/PaperBoy1.png",      
        PaperBoy2: "images/run/PaperBoy2.png",   
        PaperBoy3: "images/run/PaperBoy3.png",      
        PaperBoy4: "images/run/PaperBoy4.png",    
        PaperBoy5: "images/run/PaperBoy5.png",      
        PaperBoy6: "images/run/PaperBoy6.png",    
        PaperBoy7: "images/run/PaperBoy7.png",      
        PaperBoy8: "images/run/PaperBoy8.png",    
        PaperBoy9: "images/run/PaperBoy9.png",      
        PaperBoy10: "images/run/PaperBoy10.png",    
        PaperBoy11: "images/run/PaperBoy11.png",      
        PaperBoy12: "images/run/PaperBoy12.png",     
        PaperBoy13: "images/run/PaperBoy13.png",      
        PaperBoy14: "images/run/PaperBoy14.png",   
        PaperBoy15: "images/run/PaperBoy15.png",      
        PaperBoy16: "images/run/PaperBoy16.png",    
        PaperBoy17: "images/run/PaperBoy17.png",      
        PaperBoy18: "images/run/PaperBoy18.png",    
        PaperBoy19: "images/run/PaperBoy19.png",      
        PaperBoy20: "images/run/PaperBoy20.png",    
        PaperBoy21: "images/run/PaperBoy21.png",      
        PaperBoy22: "images/run/PaperBoy22.png",    
        PaperBoy23: "images/run/PaperBoy23.png",      
        PaperBoy24: "images/run/PaperBoy24.png",   
        _Street:'images/_Street.png',  
        AD:'images/AD.png',  
        building:'images/building.png',  
        cloud:'images/cloud.png'  
    };      
    //執行圖片預加載，加載完成后執行main  
    loadImages(sources,main);      
};     
/*end*/ 

當windows.onload發生后，我們定義一個存儲著所有圖片信息的對象sources，然后把它傳入loadImages這個方法里。

重點是看看loadImages這個方法，它有兩個參數，一個是存儲的圖片信息的sources，一個是回調函數callback（一旦圖片加載完畢，即執行callback。我們這里執行的是main函數，意味著動畫開始初始化）

總圖片數我們存在numImages里面：

// 首先遍歷數組，計算出總圖片數      
    for (var src in sources) {      
        numImages++;      
    }     

其實這個方法的核心就是給每張圖片添加一個onload事件。

當每張圖片加載完成后，我們做了三件事：

1.計算出加載完成圖片與總圖片的百分比；

2.然后畫出一個用戶可見的進度條，告訴用戶加載的進度；

3.做判斷看圖片是否加載完，如加載完了就執行callback，否則返回error。

結構如下：

//當一張圖片加載完成時執行  
  images[src].onload = function(){  
　 //計算出加載圖片數，并根據總圖片數，算出百分比  
   //畫出進度條  
   //if圖片加載完畢，則執行callback
}