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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 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
PHP parse_url 一个好用的函数
2009/10/03 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
JavaScript 创建对象
2009/07/17 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
js实现盒子滚动动画效果
2020/08/09 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Apache部署Django项目图文详解
2019/07/30 Python
python脚本后台执行方式
2019/12/21 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
简历中自我评价分享
2013/10/09 职场文书
普通院校学生的自荐信
2013/11/27 职场文书
党员公开承诺书
2014/03/25 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2014年党总支工作总结
2014/12/18 职场文书
公司周年庆典致辞
2015/07/30 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers