Question

我有一段代码将一些图像加载到div中，我希望能够加载image1，当它向上移动10px时淡入，然后image2淡入并向上移动10px。

到目前为止，我有这个

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

它会加载它们但是它们会在整个地方加载并且我得到一个跳跃运动。我想如果他们一个接一个地加载它会看起来好多了。

有什么想法吗？

感谢您的帮助

Answer 1

使用fadeIn，您可以提供第二个参数，它是在淡入淡出完成后调用的回调函数：您可以使用它来链接多个图像的淡入淡出。

你可以做（必须将其更改为真实元素）：

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

Answer 2

加载图像时，请附加一个将在淡入淡出时触发的事件处理程序，在其中加载下一张图像。

Answer 3

您可以使用类似lazyLoad jquery plugin的内容。

这允许您控制将图像加载到页面中的顺序。另一个好处是，您可以将其设置为仅在用户滚动到意味着它们在视图中的位置时加载图像。这样可以节省带宽并提高网站的初始加载速度。

如何加载图像1然后图像2然后图像3等

3 个答案: