javascript - 结合jQuery同位素和延迟加载

已经使用jQuery Isotope启动了一个项目。最初与Infinite scroll集成在一起，但认为它有点笨拙。

希望用“延迟加载”替换“无限滚动”，并想知道是否有人将两者结合起来有运气。让他们玩的很好的任何技巧都很好。

谢谢磨

最佳答案

如果要使用同位素的排序/过滤功能，则需要设置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)



使用同位素排序/过滤列表，页面顺序肯定不同于HTML，因此我们需要调整failure_limit。

如您所见，我们存储jQuery对象，以便可以将其length-1用作我们的failure_limit。如果您对为什么它是length-1感到好奇，那是因为在lazyload的update方法中进行了以下检查。

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

延迟加载其他事件

如果您没有在滚动上触发延迟加载，则将需要为正在使用的任何事件交换“滚动”触发器。

演示版

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

关于javascript - 结合jQuery同位素和延迟加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11337291/