jquery 实现滚动条下拉时无限加载的简单实例

最新推荐文章于 2020-06-19 14:13:58 发布

原创最新推荐文章于 2020-06-19 14:13:58 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery 下拉框

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的无限滚动加载技术。该技术通过监听页面滚动事件，在接近页面底部时自动加载更多数据。具体实现包括记录每次加载的最后一条记录ID、加载状态标记及AJAX调用获取新数据。

var lastId=0;//记录每一次加载时的最后一条记录id，跟您的排序方式有关。
 
  var isloading = false;

  $(window).bind("scroll", function () {

    if ($(document).scrollTop() + $(window).height() 
 
       > $(document).height() - 10 && !isloading) {

      isloading = true;

      getMore();

    }

  });
 
function getMore() {

    var url = "ajaxdata.aspx"?lastId=" + lastId +"&type=" + 其他参数

    $.getJSON(url, function (data) { 

      var html="";
 
       ... ...
 
      $(html).insertAfter($(".elem").last());

      isloading = false;

    }
 
  }