web-dev-qa-db-ja.com

続行する前に画像がロードされるのを待ちます

JavaScriptとcanvasを使用してゲームを開発しています。ゲームがロードされると、使用されるすべての画像がキャッシュされます。

リソースのタイムラインを観察すると、次のコードが非同期リクエストをトリガーしていることがわかります。

var Sprite = new Image();
Sprite.src = "sprites/sheet1.png";

エンジンは実行を続け、最終的にはレベルの描画と再生を開始します。最初のフレームがペイントされた後に読み込まれた画像は、クリッピングのために表示されない可能性があります（つまり、「ダーティ」にならない）。

だから私は次をテストしました：

console.log("begin");
var Sprite = new Image();
Sprite.onload = function() { console.log('loaded!'); };
Sprite.src = "sprites/sheet1.png";
console.log("end");

結果のコンソール出力は、発生順に次のとおりです。

  • begin
  • end
  • loaded!

ロードを実行するための$.ajaxとasync: falseの類似の方法を探しています。方法がわからない...事前に感謝します！ J.

javascriptimageasynchronouscanvasload
31
Jem

同期呼び出し（AJAXでさえも）を行わないで、代わりに適切なコールバックにコードを配置する必要があります。

function loadSprite(src, callback) {
    var Sprite = new Image();
    Sprite.onload = callback;
    Sprite.src = src;
}

次に、次のように使用します。

loadSprite('sprites/sheet1.png', function() {
    // code to be executed later
});

追加の引数を渡したい場合は、次のようにできます。

Sprite.onload = function() {
    callback(whatever, args, you, have);
};

複数の要素をロードし、それらすべてが終了するのを待つ必要がある場合は、jQuery deferred オブジェクトの使用を検討してください。

function loadSprite(src) {
    var deferred = $.Deferred();
    var Sprite = new Image();
    Sprite.onload = function() {
        deferred.resolve();
    };
    Sprite.src = src;
    return deferred.promise();
}

スプライトをロードする関数では、次のようなことを行います。

var loaders = [];
loaders.Push(loadSprite('1.png'));
loaders.Push(loadSprite('2.png'));
loaders.Push(loadSprite('3.png'));
$.when.apply(null, loaders).done(function() {
    // callback when everything was loaded
});

http://api.jquery.com/jQuery.when/

59
ThiefMaster

この質問は古いですが、jqueryを必要とせずにこれを行う方法があります。ORブラウザをフリーズします。

Image1.onLoadで、image2をロードします。
image2.onLoadで、image3をロードします。
image3.onLoadで、image4をロードします。
....
画像内n.onLoadは、メイン関数をロードします。

これが完全に最善の方法であるかどうかはわかりませんが、少なくともブラウザを凍結するよりはましです。
また、すべてのオーディオファイル、その他の必要なリソース、または実行する必要のあるその他のJavaScriptを読み込むことができます。

ブラウザをフリーズする必要はありません

2
Interpolate

私はキャンバスでこの問題を抱えていますが、あなたの解決策を試しましたが、動作する最良かつ簡単な方法は次のとおりです：

function COLPOinitCanvas(imagesfile) {
    COLPOcanvas = document.getElementById("COLPOcanvas");
    COLPOctx = COLPOcanvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = imagesfile;
    imageObj.onload = function () {
        COLPOctx.drawImage(imageObj, 0, 0, COLPOcanvas.width, COLPOcanvas.height);
    };
}
0
ettore ct