我有一个包含大量图像的网站,因此我使用ajax创建了无限滚动,并且我还使用了延迟加载插件:http://www.appelsiini.net/projects/lazyload
我的问题是:我想使用 fadeIn 效果来加载图像,当我加载第一组图像时这很好,但是当我单击“加载更多”时,fadeIn 效果将应用于那些已经可见的图像,并且到那些当前正在加载的。 因此那些已经加载的图像会消失并以淡入效果出现。
如何将淡入效果仅应用于当前正在加载的图像?
这是我加载图像的方式:
$(".loadMore").click(function(){
... some validation
$.ajax({
type: "POST",
url: "/loadMore/"+option+"/"+posts,
dataType: "json",
beforeSend: function(){
t.html(lang.loading);
},
success: function(data){
t.html(lang.loadMore);
for(var i in data.posts.id){
append(data.posts.id[i], data.posts.countComments[i], data.posts.image[i], data.posts.title[i], data.posts.link[i], data.posts.username[i], data.posts.date[i], data.posts.new_tab[i], data.posts.is_saved[i], false);
}
if(data.msg == "stop"){
t.hide();
}
$("img.lazy").lazyload({skip_invisible : false,failure_limit : 15, effect: "fadeIn"});
}
});
});
最佳答案
尝试在ajax成功方法之外设置lazyload插件。我相信你只需要设置一次。
$("img.lazy").lazyload({skip_invisible : false,failure_limit : 15, effect: "fadeIn"}).removeClass("lazy");
$(".loadMore").click(function(){
... some validation
$.ajax({
...
$("img.lazy").lazyload(
{
skip_invisible : false,
failure_limit : 15,
effect: "fadeIn"
}).removeClass("lazy");
...
});
});
关于javascript - jQuery 延迟加载插件对加载的图像应用效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25592175/