在onload之後Image.complete是真實的，但是在onload第二個圖像之後不再

我正在使用Javascript加載2個圖像並在畫布上繪製它們。我使用圖像的onload事件來繪製圖像後，他們都加載。在onload之後Image.complete是真實的，但是在onload第二個圖像之後不再

var loadedImagesCount = 0; 
var NUM_OF_TILES=2; 

window.onload=function(){ 
    background.onload = imageOnLoad(); 
    background.src ="background.png";     
    layer1 = document.getElementById("layer1"); 
    ctx1 = layer1.getContext("2d"); 
    character.onload = imageOnLoad(); 
    character.src ="character.png"; 
    layer2 = document.getElementById("layer2"); 
    ctx2 = layer2.getContext("2d"); 
} 

function imageOnLoad(){ 
    loadedImagesCount++; 
    window.alert(''+loadedImagesCount+ ' ' + background.complete + ' ' + character.complete); 
    if (loadedImagesCount==NUM_OF_TILES) drawAll(); 
         }

的imageOnLoad()被調用兩次（如預期）。第一次是說（通過警報）兩個圖像都加載。第二次它說人物圖像被加載，但背景圖像不再？這怎麼可能？爲什麼它會再次卸載圖像？刷新後，這種情況不再發生，只會在第一次加載頁面時發生。

而且由於未加載背景，繪製畫布時只繪製字符。

編輯：問題解決了。 onload變量需要一個沒有括號的方法，如果使用括號，它會立即調用該方法。

來源

2013-10-31 Pieter Heyvaert

問題已解決。 onload變量需要一個沒有括號的方法，如果使用括號，它會立即調用該方法。

來源

2017-06-19 16:36:25

這可能是因爲您沒有將window.onload函數聲明爲全局變量的背景。所以背景不是你認爲的變量。

檢查這個代碼，按預期工作，並從你的導出並注意背景和人物都是「vared」在window.onload功能之外：

<html> 
<script language="javascript"> 

var loadedImagesCount = 0; 
var NUM_OF_TILES=2; 
var background; 
var character; 

window.onload=function(){ 

    background = document.getElementById("background"); 
    character = document.getElementById("character"); 

    background.onload = imageOnLoad(); 
    background.src ="HSHOP.jpg"; 
    character.onload = imageOnLoad(); 
    character.src ="HSHOP 2.jpg"; 

} 

function imageOnLoad(){ 

    loadedImagesCount++; 
    window.alert(''+loadedImagesCount+ ' ' + background.completes + ' ' + character.complete); 
    //if (loadedImagesCount==NUM_OF_TILES) drawAll(); 
} 
</script> 
<body> 
<img id="background"/> 
<img id="character"/> 
</body> 
</html>

快速注：作爲一般規則嘗試在發佈之前儘可能清理您的代碼，以便我們更容易找到問題所在。

來源

2013-10-31 10:19:02 Yahel

對不起，我忘了添加全局變量：var layer1; var layer2; var ctx1; var ctx2; var background = new Image（）; var character = new Image（）; –

試着檢查我的文章和你的代碼之間的差異。礦山工程。 – Yahel

我發現我的錯誤：onload = imageOnLoad（）錯誤，onload = imageOnLoad是正確的，因爲第一個立即對該方法進行分類，第二個等待該事件。 –

在onload之後Image.complete是真實的，但是在onload第二個圖像之後不再

回答

相關問題