web-dev-qa-db-ja.com

JavaScriptで画像が読み込まれるのを待っています

イメージパスを含む情報を返すAjax呼び出しを行っています。

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

ポップアップdivの位置を設定するには、画像の高さに応じて計算する必要があります。そのため、位置を設定して可視性を可視に切り替える前に、画像が読み込まれるのを待ってその寸法を知る必要があります。

再帰、setTimeout、完全なimgプロパティ、while while ...でトリックを試みましたが、成功しませんでした。

だから、どうすればこれを行うことができますか？ Ajax呼び出しでディメンションを返す必要があるかもしれません。

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

上記の順序で行うことが重要であることに注意してください。最初ハンドラーを接続し、thensrcを設定します。逆にすると、画像がキャッシュにある場合、イベントを見逃す可能性があります。 JavaScriptはブラウザーの単一スレッドで実行されます（Webワーカーを使用していない場合）が、browsersは単一スレッドではありません。ブラウザがsrcを確認し、リソースが利用可能であることを特定し、それをロードし、イベントをトリガーし、要素を見て、コールバックのためにキューに入れる必要があるハンドラーがあるかどうかを確認することは完全に有効ですすべて、src行とハンドラーをアタッチする行の間で、イベント処理を完了します。 （コールバックは、登録されていれば行間で発生せず、キューで待機しますが、存在しない場合、イベントは待機する必要はありません。）

103
Josh Stodola

JQueryを使用する場合、 load イベントを使用できます。

例を見てください：

$('img.userIcon').load(function(){
    if($(this).height() > 100) {
        $(this).addClass('bigImg');
    }
});
12
Sagi

ページにキャプチャ画像（1st_image）の読み込みが遅く、キャプチャ画像（1st_image）が読み込まれた後にのみ別の画像（2nd_image）を表示したかった。そのため、最初にcaptcha（1st_image）イメージがロードされるのを待たなければなりませんでした。

以下は、画像が最初にロードされるのを待ってから別の画像をロードするのに完全に機能するソリューションです：（他の画像のロードを待っている間に「お待ちください！」画像を表示することを忘れないでください）

<script>
function checkImageLoad() {
    if (document.getElementById("1st_image").complete == true){console.log("1st_image Loaded!");}
    document.getElementById("2nd_image").src = "http://domain.com/2nd_image.png";
}
</script>
<body onload="checkImageLoad();">
<img id="1st_image" src="http://domain.com/1st_image.png">
<img id="2nd_image" src="http://domain.com/loading_please_wait.gif">

インターネットの速度が遅い場合も速い場合も、ブラウザはページ全体がすべての画像でロードされるのを待って（外部にリンクされている場合でも）関数を実行するため、2番目の画像は最初の画像が正常に読み込まれた後にのみ表示されます。

高度な注意：画像の「src」にあるWebページのURLを使用して、最初にWebページをロードし、次に画像を表示できます。目的は、外部WebページからCookieをロードすることです。表示される画像（キャプチャなど）

0
Tarik