Javascript多图像加载器答案

【问题标题】：Javascript multiple images loaderJavascript多图像加载器
【发布时间】：2012-07-04 08:02:37
【问题描述】：

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

有时我们可以看到：假

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

【问题讨论】：

你可以使用 jQuery 吗？
您的意思是在将它们添加到 html 之前它们没有完全加载，或者它们根本不会出现在呈现的页面上？
为什么不把它变成一个真正的数组，这样你就不需要检查 typeof，你可以使用 length 属性，例如。 this.imgs_ = [ {"name":"floor","img":new Image()}, {"name":"highlight","img":new Image()} ]
请注意所有这些 img: new Image() 部分如何违反 DRY。您不需要对所有这些进行硬编码。相反，您可以动态创建新图像（在循环内）。
我知道如何动态创建图像 ;) 事实上，我使用所有这些图像在 html 画布中绘制。所以，我需要有一个“图像对象”...

标签： javascript html image loader preload

【解决方案1】：

首先，按原样插入这个函数

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

要使用它，请将所有图像插入到下面的函数中。

jQuery(document).ready(function(){
    preload([
        '/images/image1.png',
        '/images/image2.png'
    ]); 
});

【讨论】：

【解决方案2】：

这就是我的做法：

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

【讨论】：

是的，这是一个不错的主意，但是我如何检索预加载的 food_small 图像以在我的画布中绘制它？（例如）
哇！非常好 :) 非常感谢 Šime Vidas ！好点子！只是一个小问题...... new Object(); 之间有什么区别？和 Object.create(null); ?
@user1499872 Object.create(null) 创建一个不继承任何东西的对象。相反，普通对象继承自Object.prototype。由于imgs 被用作哈希，所以最好不要继承任何东西。（但请注意，Object.create 和 .forEach 未在 IE8 中实现，因此您必须提供 ES5-shim）。