我有一个方便的功能,可以加载图像数组,并在加载完所有图像后执行回调。
在使用JavaScript的大部分时间里,我一直在函数式范例中进行编码,并且希望转换为面向对象。
我似乎无法正确引用this
中的unit.loadedImage
。我们将不胜感激在this
子方法中引用preloadImage()
的任何帮助。
class Unit {
constructor() {
this.loadedImages = [];
}
preloadImages(urls, allImagesLoadedCallback) {
let loadedCounter = 0;
let toBeLoadedNumber = urls.length;
urls.forEach(function(url) {
preloadImage(url, function() {
loadedCounter++;
console.log(`Number of loaded images: ${loadedCounter}`);
if (loadedCounter == toBeLoadedNumber) {
allImagesLoadedCallback();
}
});
});
function preloadImage(url, anImageLoadedCallback) {
let img = new Image();
img.src = url;
img.onload = anImageLoadedCallback;
this.loadedImages.push(img); // error is here, "Cannot read property 'loadedImages' of undefined"
}
}
}
let unit = new Unit();
console.log(unit);
unit.preloadImages([
'img/image-halo.png',
'img/image-clouds.png',
'img/image-glasses.png',
'img/image-fire.png',
'./img/image-particle.png'
], function() {
console.log('All images loaded.');
});