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

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

您可能需要保留一个名为JavaScript之类的javascript变量lastId，该变量存储最后显示的ID，并将其传递给AJAX接收器，以便它知道要返回的新内容。然后，您可以在AJAX中致电

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