HTML5，使用Javascript畫布標記image.onload（）問題

function LoadResources(){ 
     alert("In load socket"); 

    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var tiles= new Array(); 

    var loadedCount=0; 
    for (x = 101; x <= 155; x++) { 
     var imageObj = new Image(); // new instance for each image 
     imageObj.src = "Resources/ClassicCardImages/deck1/dood_deck/"+x+".GIF"; 

     imageObj.onload=function(){ 
     loadedCount++; 
     if(loadedCount==55){ 
      cardsImagesLoaded(); 
     }else { 
      alert(loadedCount); 
     } 
     }; 
     tiles.push(imageObj); 

    } 
    };

所以當我調用函數LoadResources（）它確實給「負載插座」的警報，但沒有給出警告，而在imageObj。 onload功能。

您可以使用window.onload函數，即「window.onload = function（）{..}」和我的函數在html文檔中使用。

另外我在谷歌瀏覽器上運行它。是否存在Chrome的onload問題或其他問題。

來源

2012-08-02 MrCoder

我只是爲您的代碼添加一些幫助。

要按照您的操作方式分配功能，按以下方式進行操作會更便宜。

for (x = 101; x <= 155; x++) { 
     var imageObj = new Image(); // new instance for each image 
     imageObj.src = "Resources/ClassicCardImages/deck1/dood_deck/"+x+".GIF"; 

     imageObj.onload= imageOnLoad; 
    } 
function imageOnLoad(){ 
     loadedCount++; 
     if(loadedCount==55){ 
      cardsImagesLoaded(); 
     }else { 
      alert(loadedCount); 
     } 
     }; 
     tiles.push(imageObj); 
}

來源

2012-08-02 02:37:30

感謝您的幫助，但你知道什麼是錯誤的代碼或什麼是替代解決image.onload問題...任何sorta的幫助將幫助 – MrCoder 2012-08-02 04:12:21

您正在嘗試增加，即使onload函數被調用一次裝載計數器（目前的圖像時，已經完全加載），所以沒有辦法觸發警報多次。對我來說，你想做什麼並不是很明顯。無論如何，如果要使用onload函數加載多個圖像，最佳做法是使用閉包，否則在每次迭代時可能發生的情況是，在循環結束時，只會獲取最後加載的圖像。我不打算進入細節成封閉是什麼，但原理是這樣的：

for (var i = 0; i< 4; i++) { 
    var imgObj = new Image(); 
    imgObj.onload = (function(img) { 

     return function() { 
      ctx.drawImage(imgObj, 0, 0); 
     } 
    })(i); 

    imgObj.src = 'image.png'; 
}

這樣，通過調用一個新的功能，您將創建一個新的執行上下文在每次迭代保留的i值。

來源

2012-08-02 07:05:34

當我使用window.onload（）它確實顯示圖像，而不是函數名稱並離線運行，它不是從http：// localhost：8080運行，而是從src path運行它瀏覽器.Btw即時通訊使用sockcet.io（node.js）這是否必須對canvas onload執行任何操作方法？ – MrCoder 2012-08-02 07:21:19

我不這麼認爲...... – 2012-08-02 09:15:12

HTML5，使用Javascript畫布標記image.onload（）問題

回答

相關問題