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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
js实现九宫格布局效果
May 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
详解Django的CSRF认证实现
2018/10/09 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python的pygame安装教程详解
2020/02/10 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
SQL SERVER面试资料
2013/03/30 面试题
国外的一些J2EE面试题一
2012/10/13 面试题
顶岗实习接收函
2014/01/09 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
激励口号大全
2014/06/17 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
教学督导岗位职责
2015/04/10 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
如何优化vue打包文件过大
2022/04/13 Vue.js