我的代码类似于以下代码。
'use strict'
let Cache = {}
function Preloader(asset) {
let img = new Image();
img.onload = function() {
Cache[asset] = img;
window.dispatchEvent(new Event(`${asset}_preloaded`));
}
img.src = asset;
}
class Sprite {
constructor(params) {
this._src = params.src;
if(Cache[this._src]) {
this.init();
} else {
window.addEventListener(`${this._src}_preloaded`, () => this.init(), false);
Preloader(this._src);
}
}
init() {
window.removeEventListener(`${this._src}_preloaded`, () => this.init(), false);
this._width = Cache[this._src].width;
this._height = Cache[this._src].height;
}
}
当使用图像作为参数创建新的Sprite时,它会检查图像是否已缓存。如果不是,则调用Preloader加载它。使用事件,因此Preloader可以在图像加载到缓存时告诉Sprite。
正确添加和分派事件,同时正确调用init
函数,但不删除事件。