javascript - image.Onload 没有完成图像

Question

我需要在 Javascript 中加载一组图像，但我想确保在开始绘制之前加载所有图像。因此，我忙于等待调用每个图像 onLoad 事件。首先，我创建图像并设置它们的源和 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 Canvas 上绘制它时:

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，refresh() 函数是在 onLoad() 函数之后调用的。

我在这里错过了什么？

Answer 1

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

再忙的等待，那确实从来都不是什么好事。很难提出替代方案，因为您没有首先说明为什么需要等待。但是，扩展 onload 处理程序以检测图像数组是否完整，如果是，则启动以下操作可能是个好主意 - 这将使忙碌的等待变得不必要。