18

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

希望用 Lazy Load 替换 Infinite Scroll，并想知道是否有人有幸将两者结合起来。任何让他们玩得很好的技巧都会很棒。

感谢磨坊

4

3 回答 3

28

如果要使用isotope的排序/过滤功能，需要设置lazyload的failure_limit，并通过isotope的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 代码中的图像顺序相同。在某些布局假设下，这可能是错误的。

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

如您所见，我们存储了 jQuery 对象，以便我们可以使用它的 length-1 作为 failure_limit。如果你好奇它为什么是length-1，那是因为下面检查了lazyload的update方法。

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

其他事件的延迟加载

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

演示

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

于 2012-12-17T17:29:20.603 回答
2

我认为您可能会使用它来获得一些运气：https ://github.com/fasterize/lazyload

它是独立于库的，因此不会中断。

于 2012-07-10T14:31:07.830 回答
2

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

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

在浏览器控制台中，当您向下滚动时，您将在加载图像时得到 console.log('loaded image') 确认。拖动 jsfiddle html 框以更改宽度，您将看到布局动态变化。

我添加了背景红色类，因此您可以看到同位素在加载后如何改变 dom。尝试设置它时的大多数问题来自恕我直言，同位素的 dom 操作。

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

更新： 我从未在其他浏览器中测试过示例，显然 IE 或 FF 无法工作，因为 HTTPS 资源对 javascript 资源的引用（出于某些奇怪的安全原因）。替换它们就是让它在 IE 和 FF 中工作所需的一切，如下所示：

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

于 2012-07-14T01:51:47.600 回答