我目前正在编写一个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 毫秒内,回调被触发。
所以这可能无法正常工作
有没有办法像我想要的那样实现这一目标?
基本上,我希望图像加载完成,然后触发回调,然后再次加载图像,等等......直到加载数组中的所有图像。
我最终使用了这个jquery插件:http://alz.so/imageloader/
它具有我需要的所有功能,甚至更多。