如何確保所有圖像加載之前我在HTML畫布引用

我想畫一些圖片在一個HTML畫布如何確保所有圖像加載之前我在HTML畫布引用

context.drawImage(Im1 ,205,18,184,38);

爲了確保它加載我需要把這樣的代碼但我不能得出它的東西

var Im1 = new Image(); 
Im1.src="rechnung11014page1/img/1/Im1.png"; 
Im1.onload = function() { 
    context.drawImage(Im1 ,205,18,184,38); 
}

有沒有一種方式來加載所有的圖像，然後再執行使用多個圖像的代碼塊？

來源

2011-02-16 mark stephens

在JavaScript中有body的onload方法。只需爲其創建一個事件處理程序並在其中運行您的繪圖代碼。在加載所有頁面元素之後調用OnLoad。

當然，它也會要求你直接引用這些圖片在你html的正文的某個地方。如果他們不在那裏，你可以很容易地創建一個隱藏的div來完成加載。

來源

2011-02-16 21:04:49 NotMe

[添加，因爲它是如此普遍，如果你碰巧使用jQuery，請參閱[$（文件）。就緒與$（窗口）.load]（http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/） – 2011-02-16 21:14:45

感謝您的回答。 – 2011-02-17 07:59:32

您可以加載使用FN所有的圖像像一個低於它要求當所有的圖像加載畫FN定義...

function loadImages() 
{ 
    var imgToLoad = 3, imgLoaded = 0; 

    var onImgLoad = function() 
    { 
     imgLoaded++; 
     if(imgLoaded == imgToLoad) 
      drawFromLoadedImages(); 
    }; 

    Img1 = new Image(); 
    Img1.src = 'images/x.png'; 
    Img1.onload = onImgLoad; 

    Img2 = new Image(); 
    Img2.src = 'images/y.png'; 
    Img2.onload = onImgLoad; 

    Img3 = new Image(); 
    Img3.src = 'images/z.png'; 
    Img3.onload = onImgLoad; 
}

以上FN確保所有的3張圖像調用之前加載在圖像上繪製功能。

很老的問題，但希望這種技術可以幫助其他人來對這個問題

來源

2012-01-26 10:24:35 Ani

如何確保所有圖像加載之前我在HTML畫布引用

回答

相關問題