如何加載圖像1，然後是圖像2，然後是圖像3等

我有一段代碼可以將多個圖像加載到div中，我希望能夠加載image1，當它向上移動10px時淡入，然後image2淡入並向上移動10px。如何加載圖像1，然後是圖像2，然後是圖像3等

到目前爲止，我有這個

$(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 
});

它並加載它們，但它們的加載所有的地方，我得到一個跳躍運動。我想如果他們一個接一個地加載，它會看起來好多了。

任何想法？

感謝您的幫助

來源

2011-07-15 Tara Irvine

你能在小提琴上製作劇情嗎？ – Vivek

隨着fadeIn您可以提供這就是衰落完成後調用回調函數第二個參數：你可以用它來鏈多張圖像的褪色。

你可以這樣做（有此改變的真實元素）：

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

來源

2011-07-15 09:27:53

我可以設置一個計時器爲每個兄弟做這個嗎？它的工作，但一旦圖像緩存，他們都加載在一起 –

你nedd像這樣？：http://jsfiddle.net/HTCvv/1/ –

當您加載圖像，附加一個事件處理函數，將觸發與衰落，在其中您加載下一個圖像。

來源

2011-07-15 09:28:29 Marcin

你可以使用類似lazyLoad jquery plugin的東西。

這允許您控制圖像加載到頁面的順序。另一個好處是，您可以將它設置爲只在用戶滾動到某個位置時才加載圖像，這意味着它們可以在視圖中顯示。這可以節省帶寬並提高網站的初始加載速度。

來源

2011-07-15 09:30:16

如何加載圖像1，然後是圖像2，然後是圖像3等

回答

相關問題