10

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

这是一个非常大量 javascript 的图片库，因此对于其他所有内容（例如工具提示、模式叠加层等），我一直在使用 jQuery 的 delegate() 来绑定到 ajax 插入的元素。延迟加载插件的问题是我不确定要绑定什么事件。

所以说我想用一类“懒惰”来延迟加载图像。我会这样写：

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

它适用于前 10 张图像，但在通过 ajax 插入更多图像后停止工作。我唯一能想到的就是在加载事件上使用委托，如下所示：

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

2 回答 2

17

我会使用这种ajaxStop方法。

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

removeClass防止双重初始化。

于 2012-04-05T21:16:52.377 回答
0

ajaxStop如果你想避免使用 jQuery ，除了 Kevin B 的回答之外，现在when()还为此目的定义了一个函数

// the following code will be executed when the ajax request resolve.
// the ajax function must return the value from calling the $.ajax() method.

    $.when(load_new_image(1), load_new_image(2), load_new_image(3)).done(function(i1, i2, i3){

            if($('img.lazy').length){

                 $('img.lazy').lazyload({ 

                          effect:'fadeIn'

                 }).removeClass('lazy').addClass('lazyloaded');

            }

        });

        function load_new_image(image_id) {

            return $.ajax({
                url: "someUrl",
                dataType: "json",
                data:  yourJsonData,            
                ...
            });
        }

来自：http ://api.jquery.com/jQuery.when/

于 2014-10-20T20:55:46.803 回答