image.Onload不完成图像

我需要在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的画布上：

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行给出假，我得到了臭名昭著的NS_ERROR_NOT_AVAILABLE例外。

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

我在这里错过了什么？

来源

2010-07-20 janesconference

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

重新忙着等待，那确实从来都不是好事。很难提出替代方案，因为你没有说明为什么你需要首先等待。但是，最好的办法是扩展onload处理程序以检测映像数组是否完整，如果是，则启动以下操作 - 这将使忙碌的等待不必要。

来源

2010-07-20 10:19:28

Siigh。我做了，现在onLoad回调说每个图像的“Image completed？true”。但是，当我尝试在html5画布上绘制图像时，标记完成再次设置为“false”，并且我得到臭名昭着的NS_ERROR_NOT_AVAILABLE异常。 – janesconference 2010-07-20 10:36:57

@jane是否适合正常的DOM元素？只需在黑暗中拍摄，我就没有使用Canvas的经验。 – 2010-07-20 10:40:27

我编辑了第一篇文章，画布并不重要（实际上是另一个类处理图形），问题是当我尝试绘制它们（在将它们传递给绘图类之前）时，图像看起来不完整。 – janesconference 2010-07-20 10:45:09

image.Onload不完成图像

回答

相关问题