jquery：画像の後に画像をフェードする

Question

画像が10枚あるページがあり、画像がダウンロードされた後に1枚ずつ消えてしまいます。イメージが検出され、表示される準備ができましたか？私はロードされたイメージをループする必要がありますfadeInと一度fadedInは、次のロードを待つ？

Answer 1

画像にload（）イベントを使用するだけです。例えば。 （クリス・エリクソンの答えに基づいて）

$('#some_image').hide() 
    .load(function() { 
     $(this).fadeIn(); 
    }) 
    .attr('src', 'images/headshot.jpg') 

Answer 2

多分画像をプリロードして（See here）、fadeinとfadeoutメソッドをループで順番に呼び出すことができます。

Answer 3

あなたはDOM（未確認に追加する前に、画像にイベントを追加することにより、潜在的な競合状態を避けることができるかもしれませんが、私はそれを再生したいです安全）。また、この方法は、画像を互いに重ね合わせてフェードするのに適しています。

これは、別の画像の上に画像を追加してフェードインするギャラリーコントロールに使用しています。既に2つの画像を追加している場合は、下の画像を削除します。

var url = .....; 
var container = $('#images_container'); 

$("<img />").hide().load(function() { 
    $(this).fadeIn(); 
}).attr('src', url).appendTo($(container)); 

if ($(container).children().length > 2) { 
    $(":nth-child(1)", container).remove(); 
} 

がここにHTMLです：

<div id="images_container"></div> 

CSSは次のように設定しなければならないか、または画像が互いの上にいるのではなく、スタックします。

#images_container { 
    position: relative; 
} 

#images_container { 
    position: absolute; 
}