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);

我希望这会尝试加载图像集，并且每次都会增加计数器。然后，当图像加载时，它会增加加载的计数器，然后一旦所有代码运行，其余的代码就会运行。但是我收到一条错误说＆＃34;找到的功能与提供的签名相符＆＃34;并且数组似乎包含一个空元素。

我也是在Xubuntu 12.04上的Chrome浏览器

更新事实证明，图片被放入索引1而不是0，这就是图片无法加载的原因。但它仍然无法呈现图像，请帮助。

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

Answer 1

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

＆＃13;

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);
  });
};

＆＃13;

<canvas>
</canvas>

＆＃13;

Javascript对象没有将图像设置为数组

1 个答案: