Javascript 结合 jQuery Isotope 和延迟加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11337291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Combining jQuery Isotope and Lazy Load
提问by Nelga
Have started a project using jQuery Isotope. Initially integrated with Infinite scroll, but thought it was a little clunky.
已经开始了一个使用 jQuery Isotope 的项目。最初与无限滚动集成，但认为它有点笨拙。
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.
希望用 Lazy Load 替换 Infinite Scroll，并想知道是否有人运气好将两者结合起来。任何让他们玩得开心的技巧都会很棒。
Thanks a mill
感谢磨坊
回答by acarabott
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.
如果你想使用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)
});
Explanation
解释
According to the docs ( http://www.appelsiini.net/projects/lazyload)
根据文档（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 代码中的图像顺序相同。对于某些布局假设，这可能是错误的。
With an isotope sorted/filtered list, the page order is certainly different from the HTML so we need to adjust our failure_limit.
使用同位素排序/过滤列表，页面顺序肯定与 HTML 不同，因此我们需要调整我们的 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.
如您所见，我们存储了 jQuery 对象，以便我们可以使用它的长度为 1 作为我们的 failure_limit。如果您对为什么它是 length-1 感到好奇，那是因为在lazyload 的更新方法中进行了以下检查。
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
演示
回答by Krimo
I think you might have some luck using this instead : https://github.com/fasterize/lazyload
我认为您可能会使用它来代替：https: //github.com/fasterize/lazyload
It's library independent so won't break.
它是独立于图书馆的，所以不会中断。
回答by Anthony Hatzopoulos
Here's working code using both jquery isotope and lazyload together successfully (tested in Chrome)
这是成功使用 jquery isotope 和lazyload 的工作代码（在Chrome 中测试）
In the browser console you will get console.log('loaded image') confirmation when an image is loaded, as you scroll down. Drag the jsfiddle html box to change the width and you will see the layout change dynamically.
在浏览器控制台中，当您向下滚动时，您将在加载图像时获得 console.log('loaded image') 确认。拖动jsfiddle html框改变宽度，你会看到布局动态变化。
I added the background red class so you can see how isotope alters the dom after it loads. Most of the problems while trying to set this up come from, IMHO, isotope's dom manipulation.
我添加了背景红色类，以便您可以看到同位素在加载后如何改变 dom。尝试设置时的大多数问题来自，恕我直言，同位素的 dom 操作。
I hope this is enough to get you started. Have fun.
我希望这足以让你开始。玩得开心。
Update:I never tested example in other browsers, and apparently IE or FF failed to work because of the HTTPS references for the javascript resources (for some odd security reason). Replacing them was all that was needed to get it working in IE and FF as seen here:
更新：我从未在其他浏览器中测试过示例，显然 IE 或 FF 由于 javascript 资源的 HTTPS 引用而无法工作（出于某些奇怪的安全原因）。更换它们就是让它在 IE 和 FF 中工作所需的一切，如下所示：
