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";
 }

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

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

谢谢！

好的ŠimeVidas说一个非常好的解决方案......但是：我们无法确定图像是否已满载！

这是代码：

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

Answer 2

首先，按原样插入此功能

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

要使用它，请将所有图像插入以下功能。

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

Javascript多个图像加载器

2 个答案: