jquery - jquery: 画像ごとにフェードイン

Question

10 個の画像を含むページがあり、画像がダウンロードされたら、次々とフェードインしたいと考えています。画像が読み込まれて表示される準備ができていることをどのように検出できますか? そして、ロードされた画像のfadeInをループし、一度fadeInが次にロードされるのを待つ必要がありますか?

Answer 1

画像に対して load() イベントを使用するだけです。例えば

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

Answer 2

（クリス・エリクソンの回答に基づく）

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;
}

Answer 3

画像を事前にロードしてから (こちらを参照)、ループ内で順次フェードイン メソッドとフェードアウト メソッドを呼び出すことができます。