jQuery无限滚动/延迟加载

Question

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

我的设想是将所有照片放在一个页面上，用户可以像现在一样滚动查看。然而，我理解在一个页面上加载50多个大图像的限制和影响，并考虑使用无限滚动和懒加载，这将仅在用户到达它们时或当他们点击“更多”链接时才会加载图像？

因此，我的问题是：这是否会减少页面加载时间，我应该如何实现无限滚动/懒加载，并且这能有效地工作吗，还是你能想到更有效的方法来实现这一点？

谢谢， Ted

- Ted

---

哇，你有来自未来的照片？ - Gumbo

该网站尚未正式发布，因此我只是使用测试日期。 - Ted

Answer 1

这是一个相当不错的jQuery插件，可以处理图片懒加载。

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

在视图之外的图片将不会被加载，直到它们滚动到视图中。

这将减少您的网站带宽，但如果您没有太多访问量，它不会有太大的影响。

如果要查看此技术的示例，请查看http://mashable.com/

- Pepper

---

从http://jquery.com/下载jQuery，然后按照我上面链接的页面上的步骤进行操作。抱歉，但我无法比那个页面上的指南更好地解释它 :) 祝你好运！ - Pepper

一个很好的例子是非常恰当的api.jquery.com。任何页面的整个评论部分都是懒加载的！ - Agos

不幸的是，这个插件目前无法使用。来自作者的消息：“懒加载目前无法使用。它与最新版本的浏览器不兼容。” 有人知道一个可行的替代方案吗？ - Drew Noakes

看起来现在它正在运行，但有修改：“_Lazy Load的最新版本不是您网页的即插即用替代品_”。 - Jess Telford

正如插件作者所指出的，这不是一个“即插即用”的插件，它需要对HTML进行修改。1.5.0版本是可以即插即用的。无论如何，是否有最近的适用于jQuery的即插即用的懒加载图像加载器？（抱歉，不想更改HTML标记，我认为没有真正的理由。） - Inactivist

嗨，看起来这个插件会向拥有Retina显示屏的设备提供高分辨率图像，是这样吗？ - Shaiju T

Answer 2

试试这个jQuery懒滚动加载插件 http://code.google.com/p/jquerylazyscrollloading/

- h920526

Answer 3

你可以尝试使用我编写的这个jQuery插件，它使用HTML注释来延迟加载任何任意的HTML内容，包括图片：

jQuery懒加载器博客文章

jQuery懒加载器插件页面

这里是一个例子：

<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

- Michael Collins

Answer 4

这里有两个更多的JQuery插件，可以实现懒加载/无限滚动：

http://jscroll.com/

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

- Paul B. Hartzog