javascript - 画布在任何事情开始之前加载图像？

Question

当我玩游戏并单击空格时，我会显示一个包含信息和图像的暂停屏幕。然而，图像在页面加载后 5 秒内不显示。我想这是因为它们仍在加载。如何防止画布在加载图像之前运行？

http://www.taffatech.com/Snake.html 立即点击空间。然后再次单击它，等待 6-10 秒，然后再次按下它。

这是显示图像的代码：

if(level == 1)
{
var img = new Image();
img.src = 'egg.png';
con.drawImage(img,350,40);
}
else if(level ==2)
{
var img = new Image();
img.src = 'baby.png';
con.drawImage(img,350,40);
}

else if(level ==3)
{
var img = new Image();
img.src = 'adult.png';
con.drawImage(img,350,40);
}

else
{
 var img = new Image();
 img.src = 'ultimate.png';
 con.drawImage(img,350,40);
}

Answer 1

您只需要延迟执行其他脚本，直到您想要的图像已加载。在您的 JavaScript 中，无论何时您想要预加载您的图像，您都可以使用以下代码作为指导：

function onImageLoad(e) {
     // Put code here to start your canvas business.
};

var image = new Image();
image.addEventListener('load', onImageLoad);
image.src = 'the/path/to/your/image.whatever'

您的 onImageLoad 函数可以将您的图像渲染到画布（因此当您按下暂停时会发生图像加载），或者您可以让这个脚本在开始时执行，该函数只是将图像存储到一个全局变量中。由你决定！

希望这可以帮助 ：）

Answer 2

您可以将所有图像路径保存在一个数组中并在开始之前加载所有图像

var imageObjects = [];

function loadImages(images, onComplete) {

    var loaded = 0;

    function onLoad() {
        loaded++;
        if (loaded == images.length) {
            onComplete();
        }
    }

    for (var i = 0; i < images.length; i++) {
        var img = new Image();
        img.addEventListener("load", onLoad);
        img.src = images[i];
        imageObjects.push(img);
    }
}


function init() {
    alert("start game");
    // use imageObjects which will contain loaded images
}

loadImages(["egg.png", "baby.png", "adult.png", "ultimate.png"], init);

Answer 3

waitForImages jQuery 插件

GitHub 存储库。

$('selector').waitForImages(function() {
    alert('All images are loaded.');
});