Javascript jQuery 无限滚动/延迟加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2171889/
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
jQuery Infinite Scrolling/Lazy Loading
提问by Ted
I'm currently redesigning my website and have been looking into using JavaScript and jQuery. Here is what I have so far: http://www.tedwinder.co.uk/gallery2/.
我目前正在重新设计我的网站，并一直在研究使用 JavaScript 和 jQuery。这是我到目前为止所拥有的：http: //www.tedwinder.co.uk/gallery2/。
My vision is to have all of the photos on one page, which the user can scroll through, like now. However, I understand the limitations and effects of having 50+ large-ish images on one page and have considered using infinite scrolling and lazy loading, which I understand would only load the images when the user gets to them, or when they click on a "More" link?
我的愿景是将所有照片都放在一页上，用户可以像现在一样滚动浏览。但是，我了解在一个页面上拥有 50 多个大型图像的局限性和影响，并考虑使用无限滚动和延迟加载，我理解只有当用户到达它们时才会加载图像，或者当他们点击“更多”链接？
So, my question is: would this reduce the page load, how exactly would I go about implementing infinite scrolling/lazy loading and would this work effectively, or could you think of any more effective way of doing this?
所以，我的问题是：这会减少页面加载，我将如何实现无限滚动/延迟加载，这是否有效，或者您能想到任何更有效的方法吗？
Thanks, Ted
谢谢，泰德
采纳答案by Pepper
This is a pretty good plugin for jQuery that handles image lazy loading.
这是一个很好的jQuery插件，可以处理图像延迟加载。
http://www.appelsiini.net/projects/lazyload
http://www.appelsiini.net/projects/lazyload
Images below the fold wont be loaded until they are scrolled into view.
折叠下方的图像在滚动到视图中之前不会加载。
It will cut down on the bandwidth of your site, but if you dont have a lot of traffic it wont make much of a difference.
它会减少您网站的带宽，但如果您没有大量流量，它不会产生太大影响。
For an example of this technique in use, check out http://mashable.com/
有关使用此技术的示例，请查看http://mashable.com/
回答by h920526
try this jQuery Lazy Scroll Loading Plugin http://code.google.com/p/jquerylazyscrollloading/
试试这个 jQuery Lazy Scroll Loading Plugin http://code.google.com/p/jquerylazyscrollloading/
回答by Michael Collins
You can try this jQuery plugin I wrote that uses html comments to lazy load any arbitrary bits of html, including images:
你可以试试我写的这个 jQuery 插件，它使用 html 注释来延迟加载任何 html 的任意位，包括图像：
jQuery Lazy Loader Plugin Page
Here's an example:
下面是一个例子：
<pre class=”i-am-lazy” ><!–
<img src=”some.png” />
–></pre>
<pre class=”i-am-lazy” ><!–
<div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>
<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
$('pre.i-am-lazy').lazyLoad();
});
</script>
So basically you wrap the content you want to lazy load with a placeholder tag and and inner html comment. When the placeholder becomes visible in the viewport, it is replaced with the html string inside the comment.
所以基本上你用占位符标签和内部 html 注释包装要延迟加载的内容。当占位符在视口中可见时，它会替换为注释中的 html 字符串。
You can use any tag for the placeholder but I like pre because it renders as 0 dimension when there's only a comment inside.
您可以为占位符使用任何标签，但我喜欢 pre 因为当里面只有评论时它呈现为 0 维。
Hope this helps! @MW_Collins
希望这可以帮助！@MW_柯林斯
回答by Paul B. Hartzog
Here's two more JQuery plugins that do lazy loading / infinite scroll:
这是另外两个执行延迟加载/无限滚动的 JQuery 插件：
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
