HTML5 Image.onload在Internet Explorer 9中競爭條件

Question

我發現有關IE 9和繪製圖像到stackoverflow上討論的HTML5 cnavases類似的時間問題，但沒有一個完全符合我的。

我遇到了一個問題，定期調用圖像的onload函數，但仍未準備好繪製到畫布。 （畫布保持空白）。在onload中，圖像的「完整」屬性始終爲true，「width」和「height」屬性始終包含預期值。沒有例外被拋出。如果我在將圖像繪製到畫布之前放置了一小段延遲，我永遠不會得到空白的畫。我還可以將另一個嘗試將圖像繪製到像鼠標點擊這樣的事件，並且這總是成功的。我沒有在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";