0

我目前正在编写 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事件并没有真正等到加载图像，因为在 1ms 的src属性<img>被更改后，回调被触发。

所以这可能无法正常工作

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

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

4

1 回答 1

1

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

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

于 2013-10-21T14:23:57.060 回答