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/

Answer 2

我认为你可能会有运气使用它：https://github.com/fasterize/lazyload

它独立于图书馆，所以不会破坏。

Answer 3

这里是成功同时使用jquery同位素和lazyload的工作代码（在Chrome中测试）

http://jsfiddle.net/wN6tC/62/

在浏览器控制台中，当您向下滚动时，您将在加载图像时获得console.log（“加载图像”）确认。拖动jsfiddle html框以更改宽度，您将看到布局动态更改。

我添加了背景红色类，这样你就可以看到同位素在加载后如何改变dom。试图设置这个问题时，大多数问题来自恕我直言，同位素的dom操纵。

我希望这足以让你开始。玩得开心。

<强>更新我从未在其他浏览器中测试过示例，显然IE或FF因为javascript资源的HTTPS引用而无法工作（出于一些奇怪的安全原因）。取而代之的是让它在IE和FF中运行所需的一切，如下所示：

http://jsbin.com/ajoded/ 和 http://jsfiddle.net/wN6tC/73/

结合jQuery Isotope和Lazy Load

3 个答案:

说明

其他事件的延迟加载

演示