Question

我正在使用Javascript加载2张图片并在画布上绘制它们。我使用图像的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变量需要一个没有括号的方法，如果使用括号，它将立即调用该方法。

Answer 1

这可能是因为你没有在window.onload函数之外将背景声明为全局变量。所以背景不是你认为的变量。

检查此代码是否按预期工作并从您的代码中派生出来，并注意window.onload函数之外的背景和字符是如何“vared”的：

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

快速注意：作为一般规则，请在发布之前尽可能地清理代码，以便我们更容易找到出错的地方。

Answer 2

问题解决了。 onload变量需要一个没有括号的方法，如果使用括号，它将立即调用该方法。

onload后Image.complete为true，但onload第二个图像后不再存在

2 个答案: