Question

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

Answer 1

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

....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...
<div id="placeHolder"></div>

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

 $(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'));
      });

我在my company's search page上完成了此操作。

Answer 2

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

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

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

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

这是

<script type="text/javascript">
  $(document).ready(function(){                
        $(window).bind('scroll',fetchMore);
   });

   fetchMore = function (){
       if ( $(window).scrollTop() >= $(document).height()-$(window).height()-300 ){
           $(window).unbind('scroll',fetchMore);
            $.post('ajax/ajax_manager.php',{'action':'moreReviews','start':$('.review').length,'step':5 },
            function(data) {
               if(data.length>10){
                    $(data).insertBefore($('#moreHolder'));
                    $(window).bind('scroll',fetchMore);
               }
            });
        }
   }
</script>

`

Answer 3

您指的是动态渐进式加载。

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

您需要使用AJAX来实现此功能。

Answer 4

您可以使用jscroll jquery插件

http://jscroll.com/

Answer 5

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

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

5 个答案: