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 相关文章推荐
Jquery常用技巧收集整理篇
Nov 14 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
js自定义回调函数
Dec 13 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
js在HTML的三种引用方式详解
Aug 29 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP goto语句简介和使用实例
2014/03/11 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
删除节点的jquery代码
2014/01/13 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
利用python汇总统计多张Excel
2020/09/22 Python
灵泰克Java笔试题
2016/01/09 面试题
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
银行学习十八大感想
2014/01/11 职场文书
班级学习计划书
2014/04/27 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
写给领导的感谢信
2015/01/22 职场文书
公司文体活动总结
2015/05/07 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android