如何加载图像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等

回答

相关问题