jQuery无限滚动/延迟加载

我正在重新设计我的网站,并一直在寻找使用JavaScript和jQuery。 这是我到目前为止: http : //www.tedwinder.co.uk/gallery2/ 。

我的愿景是将所有照片放在一个页面上,用户可以像现在一样滚动浏览。 但是,我理解在一个页面上有50多个大图像的限制和影响,并考虑使用无限滚动和延迟加载,我理解只会在用户到达时加载图像,或者当他们点击时“更多”链接?

所以,我的问题是:这会减少页面加载,我将如何实现无限滚动/延迟加载,这会有效地工作,还是你能想到更有效的方法吗?

谢谢,特德

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

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

折叠下方的图像不会被加载,直到它们滚动到视图中。

它会减少你网站的带宽,但如果你没有很多流量,它就不会产生太大的影响。

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

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

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

jQuery Lazy Loader博客文章

jQuery Lazy Loader插件页面

这是一个例子:

 –>
Any, html css img background, whatever.  
–>

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

您可以为占位符使用任何标记,但我喜欢pre,因为当内部只有注释时它会呈现为0维。

希望这可以帮助! @MW_Collins

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

http://jscroll.com/

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