结合jQuery Isotope和Lazy Load

Question

使用jQuery Isotope开始了一个项目.最初与无限卷轴集成,但认为它有点笨重.

希望用Lazy Load取代Infinite Scroll,并想知道是否有人将这两者结合起来.让他们玩得好的任何提示都会很棒.

谢谢一家工厂

Answer 1

如果你想使用同位素的排序/过滤功能,你需要设置lazyload的failure_limit并用同位素的onLayout回调触发事件.

jQuery(document).ready(function($) {
var $win = $(window),
    $con = $('#container'),
    $imgs = $("img.lazy");

$con.isotope({
    onLayout: function() {
        $win.trigger("scroll");
    }
});

$imgs.lazyload({
    failure_limit: Math.max($imgs.length - 1, 0)
});

说明

根据文档(http://www.appelsiini.net/projects/lazyload)

滚动页面后,Lazy Load循环通过卸载的图像.在循环中,它检查图像是否可见.默认情况下,当找到折叠下方的第一个图像(不可见)时,循环停止.这基于以下假设.页面上的图像顺序与HTML代码中的图像顺序相同.有些布局假设这可能是错误的.

使用同位素分类/筛选列表,页面顺序肯定与HTML不同,因此我们需要调整failure_limit.

正如您所看到的,我们存储了jQuery对象,以便我们可以使用length-1作为failure_limit.如果你对它为什么长度为1感到好奇,那是因为lazyload的更新方法中的以下检查.

if (++counter > settings.failure_limit) {
    return false;
}

其他事件的延迟加载

如果您没有在滚动时触发延迟加载,则需要在您使用的任何事件中交换"滚动"触发器.

演示

http://jsfiddle.net/arthurc/ZnEhn/