javascript - jQuery 无限滚动/延迟加载

Question

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

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

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

谢谢，特德

Answer 1

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

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

折叠下方的图像在滚动到视图中之前不会被加载。

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

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

Answer 2

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

Answer 3

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

jQuery Lazy Loader 博客文章

jQuery Lazy Loader 插件页面

这是一个例子：

<pre class=”i-am-lazy” ><!–
    <img src=”some.png” />
 –&gt;</pre>

<pre class=”i-am-lazy” ><!–
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–&gt;</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

Answer 4

这是另外两个执行延迟加载/无限滚动的 JQuery 插件：

http://jscroll.com/

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