web-dev-qa-db-ja.com

jQueryまたはJavaScript：画像の読み込みがいつ終了したかを判別する

サーバーまたはブラウザキャッシュからの画像の読み込みが完了したことをどのように検出できますか？同じ<img/>タグでさまざまな画像を読み込み、新しい画像の読み込みがいつ終了したかを検出したい。

ありがとうございました。

javascriptjqueryimageloadcomplete
23
Francisc
$('img').on('load', function() {
    // do whatever you want
});
41
Matthew

onloadドキュメントのイベントは、含まれているすべての要素、画像、が完全に読み込まれた後にのみ発生します。

onload <img>のイベントは、単一の画像が完全に読み込まれた後に発生します。

したがって、jQueryオブジェクトまたはDOMのaddEventListener（およびIEのattachEvent）を使用して、これらのイベントにリスナーをアタッチできます。

5
Pikrass

これは少しきれいに見えると思います

$('img').load(function() {
    // Your img has finished loading!
});
4
Henrik

さて、これは私が昨日遭遇したかなり古いスレッドです。 backbone.jsとrequire.jsを使用していて、レイアウトのサイズを変更すると、画像を含むビューで常に問題が発生しました。

したがって、レイアウトのサイズを変更するために、最後の画像の読み込みがいつ完了したかを知る方法が必要でした。上記のすべての解決策は私の場合うまくいきませんでした。数時間の調査の結果、私は機能している究極のソリューションを見つけました。

http://desandro.github.com/imagesloaded/

それが他の人にも役立つことを願っています。

4
bardu

非常によく似た質問 jQueryに何かを実行する前にすべての画像が読み込まれるのを待つ公式な方法 とPikrassが言うように：

JQueryでは、$(document).ready()を使用して、[〜＃〜] dom [〜＃〜]がロードされたときに何かを実行し、$(window).load()画像など、他のすべてのものも読み込まれたときに何かを実行します。

次に2つの例を示します。

DOM

jQuery(document).ready(function(){
    console.log('DOM ready');
});

画像/その他

jQuery(window).load(function(){
    console.log('all other things ready');
});

コンソールで確認できるはずです：

screenshot-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png

2
cwd

誰もがイベントをsrcに設定する前に発生させるべきだと述べました。

しかし、それについて心配したくない場合は、oncompleteイベント（キャッシュされたイメージでも発生します）を使用して、次のようにonloadを発生させることができます。

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

JQueryを使用すると、下位互換性を気にする必要はありません（例：img.height>0 in IE）

0
Tom Sarduy