Javascript多图像加载程序

我想做一个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";
 }

使用这种方法，我有了一个图像的“数组”，以后我可以轻松地使用它。 但是，有时似乎很少有图像没有完全加载

制造这种装载机的最佳方法是什么

谢谢

---

好的，西姆·维达斯说了一个很好的解决方案。。。但是： 我们无法确定图像是否已完全加载

代码如下：

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);

有时我们可以看到：虚假

---

我认为在加载forEach中的下一个图像之前，我们应该等待类似“onload”的事件。首先，按原样插入此函数

function preload(arrayOfImages) {
            $(arrayOfImages).each(function(){
                $('<img/>')[0].src = this;
            });
        }

我会这样做：

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 );

---

您可以使用jQuery进行此操作吗？您的意思是，在您将它们添加到html之前，它们没有完全加载，或者它们根本不会出现在呈现的页面上？还有，为什么不将其设置为一个真正的数组，这样您就不需要检查typeof，并且可以使用length属性，例如this.imgs{“name”：“floor”，“img”：new Image（）}，{“name”：“highlight”，“img”：new Image（）}]注意所有这些

img:new Image（）

部分是如何工作的。你不需要硬编码所有这些。相反，您可以动态创建新图像（在循环中）。我知道如何动态创建图像；）实际上，我使用所有这些图像在html画布中绘制。所以，我需要有一个“图像对象”…是的，这是一个很好的主意，但是我如何检索预加载的食物小图像来在我的画布上绘制它呢？（比如）哇！非常好：）非常感谢你！维达斯！好主意！只是一个小问题。。。新对象（）之间的区别是什么；和对象。创建（空）@user1499872

Object.create（null）

创建不继承任何内容的对象。相反，普通对象继承自

Object.prototype

。由于

imgs

用作哈希，因此最好不要让它继承任何内容。（不过请注意，

Object.create

和

.forEach

并没有在IE8中实现，所以您必须提供ES5垫片）。

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