旋转 img 标记中的图像 URL 以预加载所有图像 URL

我目前正在编写一个HTML5 P&C冒险。

由于在游戏开始之前有很多图像和精灵需要加载，我想预加载所有图像。

我的想法是创建一个<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是一个包含所有要加载的 url 的数组，回调函数基本上调用进度条进行更新并检查是否还有图像，然后再次调用第一个函数。

事情是，似乎load事件并没有真正等到图像加载，因为在更改<img>的src属性后的 1 毫秒内，回调被触发。

所以这可能无法正常工作

有没有办法像我想要的那样实现这一目标？

触发回调，然后再次加载图像，等等......直到加载数组中的所有图像。