在img标签中旋转图片网址以预加载所有内容

Question

我目前正在编写HTML5 P＆amp; 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 <img>归属后的1分钟内已经改变了回调被解雇了。

所以这可能无法正常工作

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

基本上我希望图像加载完成，然后激活回调，然后再次加载图像等......直到加载数组中的所有图像。

Answer 1

我最终使用了这个jquery插件：http://alz.so/imageloader/

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