如何基于用户滚动加载网页内容 [英] How to load the web page content based on user scrolling

问题描述

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

How to load the content while user scroll the web page. How to implement this?

推荐答案

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

Generally speaking, you will need to have some sort of structure like this

....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>

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

Then, you will need to detect when you are getting close to the end of the page, and fetch more data

 $(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 ，它存储最后显示的id并将其传递给AJAX接收器，以便它知道要返回的新内容。然后在你的AJAX中你可以调用

You may need to keep a javascript variable called something like lastId which stores the last displayed id and pass that to the AJAX receiver so it knows which new content to return. Then in your AJAX you could call

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

我在我公司的搜索页。

这篇关于如何基于用户滚动加载网页内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！