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


Posted in Javascript onJune 01, 2016

思路:

通过捕捉浏览器滚动条下拉事件,触发异步加载数据的js方法,实现数据的动态添加。

脚本:

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

  }

以上这篇jquery 实现滚动条下拉时无限加载的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery1.6 类型判断实现代码
Sep 01 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
vue如何进行动画的封装
Sep 26 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 #Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 #Javascript
分享一个插件实现水珠自动下落效果
Jun 01 #Javascript
js匿名函数作为函数参数详解
Jun 01 #Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 #Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 #Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 #Javascript
You might like
destoon二次开发常用数据库操作
2014/06/21 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
如何测量vue应用运行时的性能
2019/06/21 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
wxPython实现画图板
2020/08/27 Python
django orm模块中的 is_delete用法
2020/05/20 Python
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
50岁生日感言
2014/01/23 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
财务检查整改报告
2014/11/06 职场文书
介绍信范文
2015/01/31 职场文书
李强为自己工作观后感
2015/06/11 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
js Proxy的原理详解
2021/05/25 Javascript