在img標籤中旋轉圖像網址以預加載全部

Question

我目前正在編寫一個HTML5 P & C aventure。

由於在遊戲開始前有很多圖片和精靈需要加載，所以我想要預加載所有圖片。

我的想法是創建一個<img>並使其成爲visibility: hidden;，因此用戶看不到任何東西。

在每一個加載的圖像我想執行一個函數，更新進度條。

所以我做了這樣的事情：

loadImages: function() {              
    $('#preLoader').attr('src', this.__images[0]).on('load', this.loadCallback); 
},                    

loadCallback: function() {              
    this.__images.splice(0, 1);             

    Game.events.trigger('progressbar:bar:step');         

    if(this.__images.length > 0) {            
     this.loadImages();              
    }                   
    else if(!this.__fired) {              
     this.__fired = true;  

     this.trigger('finished');            
    }                   
}.$bound(),  

this.__images是所有包含要加載一個數組，回調函數基本調用進度更新並檢查是否有留下的圖像，然後再調用第一個功能。

事情看來，load事件並沒有真正等待圖像加載，因爲src的屬性已被更改後的1ms後，回調被觸發。

所以這可能無法正常工作

有沒有辦法實現這個就像我想？

基本上我想要圖像被加載完成，然後觸發回調，然後再次加載圖像等等，直到數組中的所有圖像都加載完畢。

Answer 1

最後我使用這個jQuery插件：http://alz.so/imageloader/

它有我需要的所有功能，甚至更多。