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

waitForImages jQuery插件

GitHub repository.

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

Answer 2

您只需要延迟执行其他脚本，直到加载了您想要的图像。在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 3

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

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

什么东西开始之前画布加载图像？

3 个答案: