Internet Explorer 9 中的 HTML5 Image.onload 竞争条件

Question

我发现了关于 IE 9 和在 stackoverflow 上讨论的将图像绘制到 HTML5 cnavases 的类似时间问题，但没有一个与我的完全匹配。

我遇到了一个问题，即定期调用图像的 onload 函数，但它仍未准备好被绘制到画布上。 （画布保持空白）。在 onload 中，图像的“完整”属性始终为真，“宽度”和“高度”属性始终包含预期值。不抛出异常。如果我在将图像绘制到画布之前稍微延迟 onload，我永远不会得到空白绘制。我还可以将绘制图像的另一次尝试与鼠标单击等事件联系起来，这总是成功的。我没有在 Chrome 或 Firefox 中观察到这一点。我很欣赏任何见解。谢谢！

var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;

var context = canvas.getContext("2d");

var image = new Image();

image.onload = function()
{   
    // this.complete always true here
    // A delay here seems to guarantee the draw will succeed
    context.drawImage(this, 0, 0);  // Half the time canvas remains blank after draw
    // If the canvas is still blank, a later call to context.drawImage with this image will succeed

}

image.src = "some.png";

Answer 1

我没有看到您将画布附加到正文的哪个位置——这是故意的吗？

无论如何，尝试将createElement 放在onload 中

这会让事情始终如一吗？

    var canvas;
    var context;

    var image = new Image();

    image.onload = function()
    { 
        canvas = document.createElement('canvas');
        canvas.width = 640;
        canvas.height = 480;
        document.body.appendChild(canvas);
        context = canvas.getContext("2d");

        context.drawImage(this, 0, 0);  // Half the time canvas remains blank after draw
    }
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/city-q-c-640-480-6.jpg";