jQuery 无限滚动/延迟加载答案

【问题标题】：jQuery Infinite Scrolling/Lazy LoadingjQuery 无限滚动/延迟加载
【发布时间】：2011-01-11 10:17:22
【问题描述】：

我目前正在重新设计我的网站，并一直在研究使用 JavaScript 和 jQuery。这是我目前所拥有的：http://www.tedwinder.co.uk/gallery2/。

我的愿景是将所有照片放在一个页面上，用户可以滚动浏览，就像现在一样。但是，我了解在一个页面上拥有 50 多张大型图像的限制和影响，并且考虑过使用无限滚动和延迟加载，我知道只有在用户访问图像或单击图像时才会加载图像“更多”链接？

所以，我的问题是：这会减少页面负载吗？我将如何实现无限滚动/延迟加载？这会有效吗？或者你能想出更有效的方法吗？

谢谢，泰德

【问题讨论】：

哇，你有未来的照片吗？
网站还没有正式发布所以我只是用一个测试日期。

标签： javascript jquery scroll lazy-loading infinite

【解决方案1】：

这是一个非常好的 jQuery 插件，可以处理图像延迟加载。

http://www.appelsiini.net/projects/lazyload

首屏下方的图片在滚动到视图中之前不会被加载。

它会减少您网站的带宽，但如果您没有很多流量，它不会有太大的不同。

有关此技术的使用示例，请查看http://mashable.com/

【讨论】：

从jquery.com 下载 jQuery，然后按照我上面链接的页面上的步骤操作。抱歉，但我无法比该页面上的指南更好地解释它 :) 祝你好运！
一个很好的例子也是（非常恰当的）api.jquery.com。任何页面的整个 cmets 部分都是懒加载的！
遗憾的是，这个插件目前不工作。来自作者：“Lazy Load 目前不可用。它不能按预期在最新的浏览器上工作。” 有谁知道可行的替代方案吗？
看起来它现在可以工作了，但有一些修改：“Lazy Load 的最新版本不是您网页的替代品。”
正如插件作者所指出的，这不是“插入式”，因为它需要修改 html。 1.5.0 version 已加入。无论如何，最近有没有用于 jQuery 的插入式惰性图像加载器？（抱歉，不想更改 HTML 标记，IMO 没有真正的理由。）

【解决方案2】：

你可以试试我写的这个 jQuery 插件，它使用 html cmets 来延迟加载任意的 html 位，包括图片：

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

这是一个例子：

<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>

所以基本上你用占位符标签和内部 html 注释包装你想要延迟加载的内容。当占位符在视口中可见时，它将替换为注释中的 html 字符串。

你可以为占位符使用任何标签，但我喜欢 pre，因为当里面只有评论时，它呈现为 0 维度。

希望这会有所帮助！ @MW_Collins

【讨论】：

【解决方案3】：

试试这个 jQuery Lazy Scroll Loading 插件 http://code.google.com/p/jquerylazyscrollloading/

【讨论】：

【解决方案4】：

这里还有两个 JQuery 插件可以进行延迟加载/无限滚动：

http://jscroll.com/

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

【讨论】：