イメージ1、イメージ2、イメージ3などを読み込むにはどうすればよいですか

Question

divにイメージの数をロードするコードがあります。イメージ1をロードできるようにしたい、10ピクセル上に移動するとフェードインします。 image2がフェードインして10ピクセル上に移動します。

これまでのところ、私はそれがでそれらをロードしますが、彼らはあらゆる場所にロードし、私はびくびく動きを取得し、この

$(this).find(".portfolio").load(newAppLink+" .container", function(){ 
$("<ul class='thumbs'></ul>").appendTo(this); 
var images = $(this).find(".hiddenField").val(); 
var imageArray = images.split(','); 

$.each(imageArray, function(index, value){ 
    var imageHtml = "<li><a class='gallery-link' href='#'><img src='" + value + "?Action=thumbnail&Width=400&Height=400&algorithm=proportional" +"' alt /></a></li>"; 

$(linkClicked).find(".portfolio .thumbs").append(imageHtml); 
$(".thumbs").find("img").each(function(){ 

$(this).hide(); 
$(this).load(function(){ 
var width = $(this).width(); 
$(this).parent().parent().width(width); 
$(this).fadeIn(); 
$(this).parent().siblings().find("a").fadeIn(); 
}); 
}); 

});//END EACH IMAGEARRAY 
}); 

を持っています。私は彼らが次々と積み重ねると、より良く見えるだろうと思う。

アイデア？あなたはフェージングが終了した後に呼び出されるコールバック関数である第二引数を提供することができますfadeInを助ける

Answer 1

ため

ありがとう：あなたがチェーンに複数の画像の退色をそれを使用することができます。あなたが行うことができ

（実数要素にこれを変更する必要があります）：

$(this).fadeIn('500', function(){ 
    $(this).parent().siblings().find("a").fadeIn(); 
}); 

Answer 2

あなたがイメージをロードするとき、あなたは次の画像をロードする、フェードにトリガすること、それにイベントハンドラをアタッチ。

Answer 3

lazyLoad jquery pluginのようなものを使用できます。

イメージをページにロードする順序を制御できます。もう1つの利点は、ユーザーが表示されていることを意味する位置にスクロールしたときと、画像をロードするように設定できることです。これにより、帯域幅が節約され、サイトの初期読み込み速度が向上します。