小编典典

将图像延迟加载绑定到ajax请求后插入的新图像

ajax

我正在使用Mika
Tuupola的“延迟加载”插件http://www.appelsiini.net/projects/lazyload,以在向下滚动长图像库时延迟加载图像。问题是在10张图像之后,我使用了无限滚动,所以我获取了接下来的10张图像,并通过ajax附加了它们。延迟加载不再适用于下一批附加图像。

这是一个非常漂亮的javascript图片库,因此对于其他所有内容(例如工具提示,模式叠加等),我一直在使用jQuery的委托()绑定到插入了ajax的元素。延迟加载插件的问题是我不确定要绑定到哪个
事件

所以说我想用“ lazy”类来延迟加载图像。我会这样写:

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
});

并且适用于前10张图片,但在通过Ajax插入更多图片后停止工作。我唯一想到的就是在 load 事件上使用委托,如下所示:

$(document).delegate("img.lazy", "load", function(event) {  
    $(this).lazyload({ 
         effect: "fadeIn" 
    });     
});

但这破坏了一切。谢谢!

编辑: 我用来加载更多记录的jQuery(这是一个Rails应用程序):

$(window).scroll(function() {
    var url;
    url = $(".pagination .next_page").attr("href");
    if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
    $(".pagination").html("<p>loading more images...</p>");
    return $.getScript(url);
    }
});

$(window).scroll();

阅读 192

收藏
2020-07-26

共1个答案

小编典典

我会使用该ajaxStop方法。

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
}).removeClass("lazy");
$(document).ajaxStop(function(){
    $("img.lazy").lazyload({ 
        effect: "fadeIn" 
    }).removeClass("lazy");
});

removeClass 防止双重初始化。

2020-07-26