jQuery - 個々の画像を完全に読み込む

Question

私は現在、jQueryを使用して、私のウェブサイトのサムネールの読み込みをカバーする読み込みプレースホルダ画像を操作しています。基本的に、スクリプトはページの読み込みが完了するのを待ち、読み込み中のアニメーションを非表示にします。私のサイトhereで効果を見ることができます。

しかし、読み込む画像が多いページでは、サムネイルが表示されるまでにかなりの時間がかかることがあります。

私は何らかのレイジーローディング手法を検討していましたが、読み込みアニメーションのトリガーをページ全体の読み込み完了から読み込み完了まで隠すだけの方が簡単かもしれないと思います各特定の画像。それはしかし、動作していないようです

<script type="text/javascript"> $('div[id^="photo"]').load(function() { $(this+"_loading").fadeOut('slow'); }); </script>

：私は以下のスクリプトで、この打撃を与えるています。誰か助けてくれますか？

ありがとうございます！

Answer 1

http://api.jquery.com/load-event/ @ jQueryのドキュメントから：

「このイベントは、URLに関連付けられている任意の要素に送信することができます。イメージ、スクリプト、フレーム、アイフレーム、およびウィンドウオブジェクト」

イベントをイメージ自体にバインドし、対応する読み込みテキストをコールバック関数から探します。

$(function(){ 
    $('div[id^="photo"] img').load(function(){ 
     $(this).closest('div').find('.loading').fadeOut("slow"); 
    }); 

    $('div[id^="photo"] img').each(function(){ 
     var src = $(this).attr('src'); 
     $(this).attr('src','#'); 
     $(this).attr('src',src); 
    }); 
}); 

このコードでは、マークアップを少しずつ並べ替えることができます。

また、DOMの準備ができてjQueryがロードされた後で、準備完了の関数でloadイベントをバインドする必要があります。インラインスクリプト要素は、解析されるとすぐに実行されます。

編集：上記のjQueryのドキュメントで述べたように、そこに時々このイベントはすでにキャッシュ内の画像に対して発生しません、特定のブラウザでは、この信頼性のないを作るいくつかの注意点があり、かつ WebKitの上では発生しません。イメージsrcを以前と同じ値に変更した場合。このフォーラムのスレッドには興味深い点があります：http://forum.jquery.com/topic/image-load-event-some-progress

私は上記のコードを編集して回避策を追加しましたが、動作することは保証されていません。