0

ゲームをプレイしてスペースをクリックすると、情報と画像を含む一時停止画面が表示されます。ただし、ページが読み込まれてから 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);
}
4

3 に答える 3

1

すべての画像パスを配列に保持し、開始前にすべての画像をロードできます

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);
于 2013-05-31T16:05:49.193 に答える
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 関数でイメージをキャンバスにレンダリングする (一時停止を押すとイメージの読み込みが行われる) か、最初にこのスクリプトを実行して、関数がイメージをグローバル変数に格納するだけです。君による!

お役に立てれば :)

于 2013-05-31T15:47:19.747 に答える
0

waitForImages jQuery プラグイン

GitHub リポジトリ。

$('selector').waitForImages(function() {
    alert('All images are loaded.');
});
于 2013-05-31T15:46:21.770 に答える