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

Question

我正在开发一个 HTML5 游戏，我有一个函数可以加载图像并将其附加到数组中，以便稍后显示到 Canvas 上。加载功能的代码在这里...

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>