JavaScriptで画像の読み込みを待つ

質問

私は、画像のパスを含むいくつかの情報を私に返すAjaxコールを作っています。

私はポップアップとして表示されるHTMLにこれらの情報をすべて準備します。ポップアップのdivの表示をhiddenからvisibleに切り替えるだけです。

popup divの位置を設定するために、画像の高さに応じて計算する必要があります。ですから、位置を設定し、可視性に切り替える前に、画像の寸法を知るために画像がロードされるのを待つ必要があります。

再帰、setTimeout、imgプロパティの補完、whileループ...といったトリックを試しましたが、成功しませんでした。

では、どうすればいいのでしょうか？多分、私は私のAjax呼び出しで寸法を返すべきです。

どのように解決するのですか？

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

なお、上記の順番で行うことが重要です。 最初に ハンドラをアタッチします。 次に を設定します。 src . もしこれを逆に行い、画像がキャッシュにある場合、イベントを見逃す可能性があります。JavaScript はブラウザではシングルスレッドで実行されますが（ウェブワーカーを使っている場合を除く）、その際 ブラウザー はシングルスレッドではありません。ブラウザで完全に有効なのは src を見て、リソースが利用可能であることを確認し、それをロードし、イベントをトリガーし、要素を見てコールバックのためにキューに入れる必要があるハンドラがあるかどうかを確認し、何も見ず、イベント処理を完了することは、ブラウザにとって完全に妥当であり、すべて src の行とハンドラを追加する行の間です。(コールバックが登録されている場合は行の間で発生せず、キューで待機しますが、何もない場合はイベントを待機する必要はありません)。