2

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

我认为我们应该等待像“onload”这样的事件，然后再在 forEach 中加载下一张图片

4

2 回答 2

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 );
于 2012-07-03T20:33:01.173 回答
0

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

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

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

jQuery(document).ready(function(){
    preload([
        '/images/image1.png',
        '/images/image2.png'
    ]); 
});
于 2012-07-03T20:31:43.743 回答