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 Lazy Scroll Loading Pluginhttp://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

Answer 4

这里还有另外两个延迟加载/无限滚动的JQuery插件：

http://jscroll.com/

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

Answer 5

这是一个使用jQuery和PHP而不使用插件的示例

http://gcsujai.blogspot.com/2020/05/scroll-loading-using-jquery-and-php.html