在用户向下滚动时加载内容

时间:2022-10-12 21:30:46

I am building a blog type page, and I want to load items into the page as the user scrolls down, much like Google Reader, or Soup.io. How would you go about achieving this effect? I've seen some examples which read the height of the page, and have an onScroll even attached to the window so that as the user scrolls down we can test to see if they've scrolled down far enough to warrant loading more items. Soup.io's implementation seems to remove the old items as you scroll down so that the browser isn't dealing with an ever-increasingly large DOM tree. Which javascript libraries would be best suited to this task?

我正在构建一个博客类型页面,我想在用户向下滚动时将项目加载到页面中,就像Google Reader或Soup.io一样。你会如何实现这种效果?我已经看到了一些读取页面高度的示例,并且有一个onScroll甚至附加到窗口,以便当用户向下滚动时,我们可以测试它们是否向下滚动到足以保证加载更多项目。当你向下滚动时,Soup.io的实现似乎删除了旧项目,因此浏览器不会处理越来越大的DOM树。哪个javascript库最适合这个任务?

2 个解决方案

#1


3  

Unspace had an article demonstrating this functionality: Endless Pageless: No More Next Page. Their demonstration page is here.

Unspace有一篇文章展示了这个功能:无尽的无页面:没有更多下一页。他们的演示页面在这里。

This particular example uses RoR and Prototype.

此特定示例使用RoR和Prototype。

#2


2  

Thy this jquery example http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/

你的这个jquery例子http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/

#1


3  

Unspace had an article demonstrating this functionality: Endless Pageless: No More Next Page. Their demonstration page is here.

Unspace有一篇文章展示了这个功能:无尽的无页面:没有更多下一页。他们的演示页面在这里。

This particular example uses RoR and Prototype.

此特定示例使用RoR和Prototype。

#2


2  

Thy this jquery example http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/

你的这个jquery例子http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/