2

到目前为止，我的程序正在按照我想要的方式运行。这工作正常：

// Player object
var player = {
   x: 10,
   y: 10,
   draw: function () {
       ctx.drawImage(playerImg, 0, 0);
   ...

  1. 我是否应该先检查是否playerImg已加载，即使到目前为止它工作正常？

  2. 另外，最好的检查方法是什么。我正在考虑将所有图像放在一个数组中。然后检查onLoad功能。如果它们都已加载，那么我将开始游戏循环。这是一个好主意吗？

谢谢

4

1 回答 1

7

图像加载的工作原理

您需要检查图像是否已加载，因为图像加载是异步的。您可能会体验到您的代码有时可以在没有的情况下工作。这主要是因为您的图像存在于缓存中并且浏览器能够在drawImage调用之前足够快地加载它，或者图像存在于本地磁盘上。

但是，新用户需要先下载数据，并且您不希望第一次使用的用户遇到图像未显示等错误，因为它们没有完成加载。

由于它是异步工​​作的，因此您的代码将在后台加载图像时继续执行。这可能会导致您的代码在图像完成加载之前执行。所以处理图像加载很重要

处理多个图像

您可以先加载所有图像（或您需要开始的图像），然后可以使用数组定义它们：

var imageURLs = [url1, url2, url3, ...],
    images = [],
    count = imageURLs.length;

然后迭代并创建图像元素：

for(var i = 0; i < count; i++) {

    /// create a new image element
    var img = new Image();

    /// element is valid so we can push that to stack
    images.push(img);

    /// set handler and url
    img.onload = onloadHandler;
    img.src = imageURLs[i];

    /// if image is cached IE (surprise!) may not trigger onload
    if (img.complete) onloadHandler().bind(img);
}

并在回调函数中进行库存计数：

function onloadHandler() {
    /// optionally: "this" contains current image just loaded
    count--;
    if (count === 0) callbackDone();
}

您的回调是您接下来要执行的代码。您的图像将按照images与imageURLs.

对于生产，您还应该合并一个onerror处理程序，以防出现问题。

于 2013-09-24T06:58:34.580 回答