Question

这让我发疯了。

我需要在Javascript中加载一组图像，但我想确保在开始绘制之前加载所有图像。所以，我忙 - 等待每个图像onLoad事件被调用。首先，我创建图像并设置其源和上载功能：

// Load images from names
for (i = 0; i < this.nImages; i++) {
    this.imagesArray[i] = new Image();
    this.imagesArray[i].onload = this.onLoad(i);
    this.imagesArray[i].src = images[i];
}

这是onLoad函数，我正在开发的类的成员（前两个步骤在构造函数中）：

MyClass.prototype.onLoad = function (nimage) {
    console.log ("Image completed? ", nimage, " ", this.imagesArray[nimage].complete);
    this.imagesLoaded++;

}

然后我忙着等待所有onLoad函数递增计数器（再次，在构造函数中）：

while (this.imagesLoaded < this.nImages) {
    // This is busy wait, and I don't like it.
    continue;
}

到目前为止，这么好。但是当我尝试用我的drawClass在HTMl5画布上绘制它时：

MyClass.prototype.refresh = function () {

    // Gets one of the images in the range    
    var imageNum = this.GetImageNum();

    // Test for completeness. This gives FALSE :(
    console.log ("completeness for image number ", imageNum, " is: ", this.imagesArray[imageNum].complete);

    this.drawClass.draw(this.imagesArray[imageNum], this.xOrigin, this.yOrigin);
}

console.log行提供 false ，我得到了臭名昭着的NS_ERROR_NOT_AVAILABLE异常。

根据Firebug的说法，请不要在 onLoad（）函数之后调用refresh（）函数。

我在这里缺少什么？

Answer 1

您需要在设置源之前指定onload ，否则可以在脚本设置处理程序之前完成加载。也许这已经解决了。

重新忙碌的等待，这确实是一件好事。很难提出替代方案，因为你没有说明为什么你需要在第一时间等待。但是可能有一个好主意是扩展onload处理程序以检测图像数组是否完整，如果是，则启动以下操作 - 这将使繁忙的等待变得不必要。

image.Onload无法完成图像

1 个答案: