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