javascriptと同期して画像を読み込む

Question

画像を同期して読み込む必要があります。つまり、画像が読み込まれるまでjavascriptの実行を一時停止する必要があります。 image.onloadは非同期であるため、画像がロードされる前にmain関数が戻ります。

私はキャンバスを使用していますが、画像がロードされる前にmain関数が返って描画されると、キャンバス内の他のものが画像の前に描画されます。これは、キャンバスでの描画の順序が非常に重要であるため機能しません！

var img = new Image(); 
img.onload = function() { 
    //image drawing code here 
} 
img.src = "blahblahblah"; 
//function returns here, and other drawing code happens before image is drawn 

同期これを行うために、またはイメージが完全に機能から復帰する前にロードされるまで待つように方法はあり：ここで

は、私が何をしてきたのですか？

Answer 1

同期この を行うには、または 画像は関数から を返す前に完全にロードされるまで待機する方法はありますか？

No. AFAIK、JavaScriptでは同期して実行できる唯一のことは、同期XHR呼び出しです。

いずれにしても、実際に行うべきことは、依存関係を実装するコールバックの階層を設定することです。

Answer 2

私はあなたが非同期にそれを行うことはできないと思うし、画像ファイルへのパスが間違っていると非常に危険だと思います。 onloadはコールバックであり、イメージが完全にロードされたときに呼び出されることを考慮する必要があります。

したがって、コールバック関数ですべての描画コードを実行する必要があります。

Answer 3

これはリファクタリングで解決できませんか？

イメージがコールバックによって呼び出された関数にロードされた後に実行する必要があるコードをすべてラップします（またはその関数をコールバックにする）。

メイン関数が返された場合、他のコードが実行されると言われています。あなたもそれを包みますか？あなたはそれが実行を遅らせることができますか、またはこのonloadイベントまたは他のイベントに依存することができますか？

画像の読み込み中に他のJavaScriptコードのソースを動的に読み込むことさえできます。