结合jQuery Isotope和Lazy Load [英] Combining jQuery Isotope and Lazy Load

问题描述

使用jQuery Isotope开始了一个项目。最初与无限滚动相结合，但认为它有点笨重。

希望用惰性负载取代无限滚动，并想知道是否有人将两者结合起来。任何提示，让他们发挥很好。

感谢磨坊

解决方案

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

<$ p $ （$）$ $ $ = $（窗口），
$ 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对象，以便我们可以将其长度为1作为我们的failure_limit。如果你对长度为1的原因感到好奇，这是因为lazyload更新方法中有以下检查。

  if （++ counter> settings.failure_limit）{
 return false; 
} 
  

延迟加载其他事件

如果您没有在滚动上触发您的lazyload，则需要为使用的任何事件交换滚动触发器。
$ b 演示

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

Have started a project using jQuery Isotope. Initially integrated with Infinite scroll, but thought it was a little clunky.

Was hoping to replace Infinite Scroll with Lazy Load, and wondered if anyone has had any luck combining the two. Any tips to get them to play nice would be great.

Thanks a mill

解决方案

If you want to use isotope's sorting/filtering functions, you will need to set the failure_limit of lazyload and trigger the event with isotope's onLayout callback.

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)
});

Explanation

According to the docs ( http://www.appelsiini.net/projects/lazyload )

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.

With an isotope sorted/filtered list, the page order is certainly different from the HTML so we need to adjust our failure_limit.

As you can see we store the jQuery object so that we can use its length-1 as our failure_limit. If you're curious as to why it is length-1, it's because of the following check in lazyload's update method.

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

Lazy load on other events

If you are not triggering your lazyloads on scroll, you will need to swap the "scroll" trigger for whichever event you are using.

Demo

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

这篇关于结合jQuery Isotope和Lazy Load的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！