如何基于用户滚动加载网页内容

如何在用户滚动网页时加载内容。 怎么实现这个?

一般来说,你需要有这样的结构

....first page of content... ....first page of content... ....first page of content... ....first page of content... ....first page of content... ....first page of content... ....first page of content... 

然后,您需要检测何时接近页面末尾,并获取更多数据

  $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()){ AddMoreContent(); } }); function AddMoreContent(){ $.post('getMoreContent.php', function(data) { //Assuming the returned data is pure HTML $(data).insertBefore($('#placeHolder')); }); } 

您可能需要保留一个名为lastId的javascript变量,它存储最后显示的id并将其传递给AJAX接收器,以便它知道要返回哪些新内容。 然后在你的AJAX中你可以打电话

  $.post('getMoreContent.php', 'lastId=' + lastId, function(data) { //Assuming the returned data is pure HTML $(data).insertBefore($('#placeHolder')); }); 

我在公司的搜索页面上做到了这一点。

只是为了扩展Dutchie432。 根据我的经验

if ($(window).scrollTop() == $(document).height() - $(window).height())

可能不是一贯的真实(个人我不能使它真实,因为它是跳数)。
此外,如果用户向上和向下滚动它可能会触发许多请求,而我们正在等待第一个ajax调用返回。

所以我要做的就是使用> =而不是==。 然后,在发出我的ajax请求之前取消绑定scrollTop。 然后,如果ajax返回任何数据(这意味着可能有更多),再次绑定它。

这里是

  

`

您指的是Dynamic Progressive Loading。

这是一个记录很好的概念,甚至还有来自不同库的内置支持。 例如,JQuery实际上有一个支持渐进式加载的GridView。

您需要使用AJAX来实现此function。

你可以使用jscroll一个jquery插件

http://jscroll.com/

你可以使用像jQuery这样的库来检索内容,然后将它附加到页面内容,或者你可以使用这样的一些jquery插件: http : //gbin1.com/technology/jquerynews/20111017jquerypluginwaypoints/infinite-scroll/