Javascript多图像加载器

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

来源

2012-07-03 user1499872

是你能够使用jQuery的呢？ – Mike

是的，我可以使用jQuery！ :) – user1499872

你的意思是说，他们没有完全加载之前，你将它们添加到HTML中，或者他们将不会出现在呈现的页面上？ – dano

这是我会怎么做它：

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-03 20:33:01

是的，这是一个不错的主意，但我如何检索预加载的food_small图像以将其绘制在画布中？（例如） – user1499872

@ user1499872我已经更新了我的答案... –

哇！非常好:) 非常感谢你ŠimeVidas！好想法！只是一个小问题...新的对象（）;有什么区别？和Object.create（null）; ？ – user1499872

首先等待加载之前像“的onload”事件下一个图像，插入此功能是

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

使用它，插入所有图像到下面的功能。

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

来源

2012-07-03 20:31:43 Mike

Javascript多图像加载器

回答

相关问题