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

我在stackoverflow上发现了与IE 9和HTML5 CNAVASE相关的类似计时问题，但没有一个与我的完全相同

我遇到了这样一个问题：图像的onload函数被周期性地调用，但它仍然没有准备好被绘制到画布上。（画布保持空白）。在onload中，图像的“complete”属性始终为true，“width”和“height”属性始终包含预期值。没有抛出异常。如果我在将图像绘制到画布之前在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";

---

我看不出你把画布附加到身体的什么地方——这是故意的吗

无论如何，请尝试将

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";

---

我应该补充一点，更令人沮丧的是，如果我打开IE9调试器（使用F12），这个时间问题就不会发生。谢谢你的回复。您是对的，在我的示例中，我没有将画布附加到文档主体。一旦图像被标记为已加载，我就在setInterval循环中将其重复复制到实际的文档画布上。（这是一个游戏的背景）。按照您的建议在onload中创建元素可以减少问题的发生，但并不能完全阻止它。然而，我相信这是因为这延迟了调用onload和执行drawImage之间的时间。我也可以通过在绘图之前放置一个空for循环来实现同样的改进。你根本不需要任何延迟循环。此时，onload中的所有代码都在同步执行。还有其他线索吗？顺便说一句，这个新画布的任何复制都需要在onload完成后进行（例如，在onload内部调用copyToCanvas（）以确保准备就绪）。