为什么图像不会在加载时显示,而是在刷新时显示？

Question

我正在玩HTML5中的canvas元素,我注意到了一种奇特的行为.在初始加载时,我显示的图像不显示.但是,当我刷新浏览器时,它会正确显示.我使用过IE9和Chrome.两者表现相同.JavaScript代码如下所示:

window.onload = load;
function load() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.fillRect(0, 0, 640, 400);
    var image = new Image();
    image.src = "Images/smiley.png";
    context.drawImage(image, 50, 50);
}

矩形正确地绘制两次,它是仅在浏览器刷新时显示的笑脸.

我正在学习HTML5和JavaScript.我确定我只是在做一些愚蠢的事,但我无法弄明白.

Answer 1

图像以异步方式加载,因此只有在刷新后才能提前加载,因为它已被缓存.通常在您拨打电话时尚未加载drawImage.用途onload:

var image = new Image();
image.src = "Images/smiley.png";
image.onload = function() {
    context.drawImage(image, 50, 50);
};