Question

我现在正试图在我的网站上实现lazyload。我已经成功地在具有静态库的页面上进行了延迟加载。

该网站的主要产品组合包含大量图片，可以使用javascript库Isotope进行过滤。

当未使用过滤时，延迟加载正常工作，但是，如果页面加载但我不滚动，但使用过滤，则进入视图的项目无法解析。我发现偶尔的图像有效，但大多数都没有。对于如何解决这个问题，有任何的建议吗？

据推测，我需要能够做一些能够重新触发延迟加载以刷新或重新检查自己的东西吗？

以下是我正在努力工作的图库，您可以在其中查看我遇到的问题：http://www.imageworkshop.com/lazyload-portfolio/

任何人都可以提供帮助吗？

Answer 1

点击过滤后的商品代码：$(window).trigger('scroll');

Answer 2

我从acarabott找到了这个答案 - https://stackoverflow.com/a/13919010/735369 我实现了这个，这已经奏效了。唯一的问题是在滚动操作发生之前不会发生刷新。

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

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.

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

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

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

其他事件的延迟加载

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

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

延迟加载 - 与javascript过滤结合使用时刷新/更新

2 个答案: