jQuery无限滚动/延迟加载 [英] jQuery Infinite Scrolling/Lazy Loading

问题描述

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

I'm currently redesigning my website and have been looking into using JavaScript and jQuery. Here is what I have so far: http://www.tedwinder.co.uk/gallery2/.

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

My vision is to have all of the photos on one page, which the user can scroll through, like now. However, I understand the limitations and effects of having 50+ large-ish images on one page and have considered using infinite scrolling and lazy loading, which I understand would only load the images when the user gets to them, or when they click on a "More" link?

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

So, my question is: would this reduce the page load, how exactly would I go about implementing infinite scrolling/lazy loading and would this work effectively, or could you think of any more effective way of doing this?

谢谢，
特德

推荐答案

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

This is a pretty good plugin for jQuery that handles image lazy loading.

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

折叠后的图片在滚动到视图之前不会被加载。

Images below the fold wont be loaded until they are scrolled into view.

它会减少您网站的带宽，但如果您没有大量的流量，它将不会产生太大的影响。

It will cut down on the bandwidth of your site, but if you dont have a lot of traffic it wont make much of a difference.

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

For an example of this technique in use, check out http://mashable.com/

这篇关于jQuery无限滚动/延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！