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

Javascript object not setting image to an array

本文关键字：设置 数组 图像 对象 Javascript      更新时间：2023-09-26

我正在开发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和loaded都是NaN，因此while循环根本无法加载。我把它们设置为零，wile循环没有终止，它破坏了我的浏览器选项卡。

您需要某种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>

相关文章：