Ajax实现无限滚动

52次阅读
没有评论

实现无限滚动是一种常见的优化技术,它可以在滚动到页面底部时自动加载更多的数据,以避免用户不断点击“下一页”按钮或者进行其他操作来查看更多数据。下面是一个使用Ajax实现无限滚动的示例:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Infinite Scroll Demo</title>
</head>
<body>
  <div id="data-container">
    <!-- 这里放置数据 -->
  </div>
  <div id="loading-indicator" style="display: none;">
    Loading...
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

JavaScript:

// 当页面滚动到底部时加载更多数据
$(window).scroll(function() {
  if($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadMoreData();
  }
});

// 加载更多数据
function loadMoreData() {
  // 显示加载指示器
  $('#loading-indicator').show();
  
  // 发送Ajax请求
  $.ajax({
    url: '/api/data',
    type: 'GET',
    data: { offset: offset, limit: limit },
    success: function(data) {
      // 隐藏加载指示器
      $('#loading-indicator').hide();
      
      // 渲染新数据
      $('#data-container').append(data);
      
      // 更新偏移量
      offset += limit;
    }
  });
}

上面的代码中,当用户滚动到页面底部时,会调用 loadMoreData() 函数来加载更多数据。该函数会显示一个加载指示器,然后发送一个Ajax请求来获取更多数据。获取到数据后,会将新数据追加到已有的数据列表中,并更新偏移量以便在下次加载更多数据时使用。需要注意的是,为了避免发送过多的Ajax请求,可以在页面加载时先加载一部分数据,而不是等到用户滚动到底部才加载数据。

正文完
 
评论(没有评论)