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调用wcf并展示出数据的方法
Jul 07 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
js实现日期级联效果
Jan 23 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
pm2 部署 node的三种方法示例
Oct 20 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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遍历二维数组的代码
2011/04/22 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
python进阶教程之异常处理
2014/08/30 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python3.4爬虫demo
2019/01/22 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
打架检讨书100字
2014/01/19 职场文书
学生感冒英文请假条
2014/02/04 职场文书
授权委托书样本
2014/04/03 职场文书
cf战队收人口号
2014/06/21 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android
Windows server 2016服务器基本设置
2022/08/14 Servers