2

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

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

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

大概我需要能够做一些事情来重新触发延迟加载以刷新或重新检查自己？

这是我正在尝试工作的画廊，您可以在其中看到我遇到的问题：http ://www.imageworkshop.com/lazyload-portfolio/

有谁能帮忙吗？

4

2 回答 2

3

单击过滤后的项目调用此代码：$(window).trigger('scroll');

于 2013-01-03T00:46:51.917 回答
0

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

如果要使用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）

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。如果你好奇它为什么是length-1，那是因为下面检查了lazyload的update方法。

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

其他事件的延迟加载

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

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

于 2013-01-10T02:23:34.297 回答