2

我正在使用 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()调用两次（如预期的那样）。第一次是（通过警报）说两个图像都已加载。第二次说加载了人物图片，但是背景图片没有了？这怎么可能？为什么它会再次卸载图像？刷新后不再发生这种情况，它只会在您第一次加载页面时发生。

并且因为没有加载背景，所以在画布的时候，只画了人物。

4

2 回答 2

0

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

检查此代码是否按预期工作并且源自您的代码，并注意背景和字符如何在 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-31T10:19:02.693 回答
0

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

于 2017-06-19T16:36:25.690 回答