Javascript 多图像加载器

Question

我想制作一个 javascript 图像加载器。

这是我的尝试:

function ImgLoader() {

   this.imgs_ = {
       0 : {name: "floor", img: new Image()},
       1 : {name: "highlight", img: new Image()},
       2 : {name: "player-north", img: new Image()},
       3 : {name: "player-south", img: new Image()},
       4 : {name: "player-west", img: new Image()},
       5 : {name: "player-east", img: new Image()},
       6 : {name: "food_small", img: new Image()},
       7 : {name: "food_medium", img: new Image()},
       8 : {name: "food_large", img: new Image()},
   };

}

 ImgLoader.prototype.load = function() {

 for (var i = 0; typeof(this.imgs_[i]) != "undefined"; i++)
     this.imgs_[i].img.src = "img/" + this.imgs_[i].name + ".png";
 }

通过这种方法，我有了图像“阵列”，以后可以轻松使用。但是，有时似乎很少有图像未完全加载。

制作这种加载器的最佳方法是什么？

谢谢!

---

好的 Šime Vidas 说了一个很好的解决方案......但是:我们不能确定图像是否已完全加载!

这是代码:

var imgs = Object.create( null ); // or var imgs = {};

[
   'floor',
   'highlight',
   'player-north',
   'player-south',
   'player-west',
   'player-east',
   'food_small',
   'food_medium',
   'food_large'
].forEach(function ( name ) {
    var img = new Image;
    img.src = 'img/' + name + '.png';
    imgs[ name ] = img;
});

使用是:

imgs.food_small;

但是如果我像这样检查图像的完整属性

console.log(imgs.food_small.complete);

有时我们可以看到:false

我认为我们应该在加载 forEach 中的下一张图片之前等待像 'onload' 这样的事件

Answer 1

我会这样做:

var imgs = Object.create( null ); // or var imgs = {};

[
    'floor',
    'highlight',
    'player-north',
    'player-south',
    'player-west',
    'player-east',
    'food_small',
    'food_medium',
    'food_large'
].forEach(function ( name ) {
    var img = new Image;
    img.src = 'img/' + name + '.png';
    imgs[ name ] = img;
});

现在您可以像这样检索每个单独的图像:

imgs.food_small

例如:

ctx.drawImage( imgs.food_small, 0, 0 );