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 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
node 版本切换的实现
Feb 02 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
javascript实现拼图游戏
Jan 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
党员干部承诺书
2014/03/25 职场文书
个人公开承诺书
2014/03/28 职场文书
机械专业求职信范文
2014/07/15 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
Python初识逻辑与if语句及用法大全
2021/08/07 Python
Python如何让字典保持有序排列
2022/04/29 Python
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技