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 nth-child()选择器的简单应用
Jul 10 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
vue select 获取value和lable操作
Aug 28 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
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
建筑班组长岗位职责
2014/01/02 职场文书
四年级语文教学反思
2014/02/05 职场文书
迎新晚会主持词
2014/03/24 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电