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

时间:2013-09-24 06:33:08

标签: javascript html5 canvas html5-canvas

到目前为止,我的程序正按照我想要的方式工作。这很好用:

// Player object
var player = {
   x: 10,
   y: 10,
   draw: function () {
       ctx.drawImage(playerImg, 0, 0);
   ...
  1. 我应该先检查是否先加载playerImg,即使它到目前为止工作正常吗?

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

  3. 由于

1 个答案:

答案 0 :(得分:6)

图像加载的工作原理

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