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

Del*_*ero 10 ajax jquery lazy-loading image infinite-scroll

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

这是一个相当javascript的图像库,所以对于其他一切(如工具提示,模态叠加等),我一直在使用jQuery的委托()绑定到插入ajax的元素.Lazy Load插件的问题是我不确定要绑定到哪个事件.

所以说我想懒得加载一类"懒"的图像.我会写这个:

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
});
Run Code Online (Sandbox Code Playgroud)

它适用于前10个图像,但在通过ajax插入更多图像后停止工作.我唯一能想到的是在load事件上使用委托,如下所示:

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

但这打破了一切.谢谢!

编辑: 我用来加载更多记录的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();
Run Code Online (Sandbox Code Playgroud)

use*_*654 17

我会用这个ajaxStop方法.

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
}).removeClass("lazy");
$(document).ajaxStop(function(){
    $("img.lazy").lazyload({ 
        effect: "fadeIn" 
    }).removeClass("lazy");
});
Run Code Online (Sandbox Code Playgroud)

removeClass 防止双重初始化.

  • 它性能友好,但是如果你将它放在更新页面的特定ajax请求的回调中会更好. (3认同)