画像が読み込まれるのを待ってから

Question

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.

Answer 1

あなたが同期何（いなくても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/

Answer 2

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

image1.onLoadでは、image2をロードします。
image2.onLoadでは、image3をロードします。
image3.onLoadでは、image4をロードします。
....
イメージ _n .onLoadメインの機能をロードします。

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

が

Answer 3

を必要とされていない私は、キャンバス と、この問題は、私はあなたのソリューションを試してみたが、作品最善かつ簡単な方法は次のとおりです。ご返信用

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