3

内部にdiv任意の数の要素を持つ を使用しています。img現在、それぞれimgに次の CSS があります。

#content > img {
display: none;
position: absolute;
top: 0px;
left: 0px;
}

また、画像を順番に表示および非表示にする機能を使用して、画像を循環させることができます。ただし、各画像の読み込み中に、「読み込み中...」の画像を表示したいと思います。JavaScript/jQuery を使用して、各不完全な画像のソースを「読み込み中...」の画像と交換したいのですが、まだ読み込みを許可しています。これを行うための無駄のない意味のある方法は何ですか?

4

2 に答える 2

5 
$(function(){
   $('<img>').attr('src','loading.gif'); // preload the "loading" image.

   $('#content > img').each(function(){
       var original = this.src;
       var $this = $(this);
       $this.attr('src','loading.gif'); // swap to loading image.
       $('<img>').attr('src',original)// pre-load original.
              .load(function(){
                 $this.attr('src',original); // swap it back when pre-load is done. 
              });
   })
});

クレイジーな例

于 2010-09-23T03:42:34.493 に答える
1

ここにある imagesLoaded プラグインがあります: http://gist.github.com/268257

読み込み中の画像を表示し、imagesLoadedイベントにバインドし、トリガーされたら読み込み中の画像を非表示にします。

アップデート：

実際、jQuery には現在ロードを検出するメソッドが組み込まれています: http://api.jquery.com/load-event/

于 2010-09-23T03:37:22.767 に答える