Javascript对象未将图像设置为数组

Question

我正在开发HTML5游戏，并且具有一个应加载图像并将其附加到数组以供以后显示在画布上的函数。 加载功能的代码在这里...

function loadImage(url) {
    box.images.total++;
    image = new Image();
    image.src = url;
    image.onload = function () {
       box.images.loaded++;
   };
   box.images[box.images.length] = image;
}

保持数组的代码在这里...

var box = new Object({});
box.images = new Array([]);

渲染代码在这里...

loadImage("images/background.png");
while (box.images.loaded<box.images.total) {console.log("lol");}
box.ctx.drawImage(box.images[0], 0, 0);

我希望这将尝试加载图像集，并且每次都会增加计数器。 然后，当图像加载时，它将增加加载的计数器，然后，一旦所有代码运行完毕，其余代码将运行。 但是我收到一个错误消息，提示“找到了与提供的签名匹配的函数”，并且该数组似乎包含一个空元素。

我也在Xubuntu 12.04上使用Chrome

更新事实证明，该图像被放置在索引1中而不是0中，这就是为什么不加载该图像的原因。 但是它仍然不能渲染图像，请帮忙。

另一个更新因此，事实证明total和load均为NaN，因此while循环根本无法加载。 我将它们设置为零，并且wile循环没有终止，这崩溃了我的浏览器选项卡。

Answer 1

您需要某种Promise或回调函数。 为了简单起见，我建议使用回调。 例：

 var box = {}; box.images = []; box.images.total = box.images.loaded = 0; function loadImage(url, callback) { box.images.total++; image = new Image(); image.onload = function () { box.images.loaded++; // We call something when the image has loaded callback(); }; image.src = url; box.images[box.images.length] = image; } function loadAllImages(urls, callback) { // Loop through each image and load url for (var i = 0; i < urls.length; ++i) { var url = urls[i]; loadImage(url, function() { // When everything loads, call callback console.log(box.images.total, box.images.loaded); if (box.images.loaded === box.images.total) callback(); }); } } window.onload = function() { box.ctx = document.querySelector("canvas").getContext("2d"); loadAllImages([ "https://lh4.googleusercontent.com/-rNTjTbBztCY/AAAAAAAAAAI/AAAAAAAAAFM/RNwjnkgQ9eo/photo.jpg?sz=128", "https://www.gravatar.com/avatar/20e068dd2ad8db5e1403ce6d8ac2ef99?s=128&d=identicon&r=PG&f=1" ], function() { // Do whatever once everything has loaded box.ctx.drawImage(box.images[0], 0, 0); }); }; 

 <canvas> </canvas>