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

最新推荐文章于 2025-06-11 18:58:17 发布

hoochiang

最新推荐文章于 2025-06-11 18:58:17 发布

阅读量336

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： jquery 下拉框

本文链接：https://blog.youkuaiyun.com/hoochiang/article/details/84858010

js 专栏收录该内容

7 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

    }
 
  }