检查是否在游戏循环之前加载了图像答案

【问题标题】：Check if Images are loaded before gameloop检查是否在游戏循环之前加载了图像
【发布时间】：2013-09-29 06:00:45
【问题描述】：

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

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

我是否应该先检查playerImg 是否已加载，即使它目前工作正常？
另外，最好的检查方法是什么。我正在考虑将所有图像放在一个数组中。然后检查onLoad 函数。如果它们都已加载，那么我将开始游戏循环。这是个好主意吗？

谢谢

【问题讨论】：

您可以附加 onload 事件来动态下载图像，如果图像已完全加载，则将布尔值标记为 true，并在该布尔值为 true 时开始游戏循环

标签： javascript html canvas html5-canvas

【解决方案1】：

图像加载的工作原理

您需要检查图像是否已加载，因为图像加载是异步的。您可能会体验到您的代码有时可以在没有的情况下工作。这主要是因为您的图片存在于缓存中，并且浏览器能够在调用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 处理程序，以防出现问题。

【讨论】：

如果我没记错的话，一些 IE 版本在从缓存加载时不会触发 onload 事件。设置 src 后，检查 img.complete 是否为 true 可能有意义。如果是，则可以手动调用 onloadHandler，否则只需将其绑定到事件。
感谢您的精彩回答。如果我要使用 HTML 添加图像（但使它们不可见）怎么办。那我可以只创建一个函数来检查整个页面是否已加载吗？例如，window.onLoad 或 document.onLoad。那时，我会通过它们的 html id 获取图像并将它们显示在我想要的位置？
@Tony 这也是可能的。请注意，从一开始就隐藏图像时，所有浏览器的行为都不相同。 IIRC 旧版 Opera 浏览器在图像可见之前不会加载图像，这意味着您将遇到与开始时相同的问题。