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 TextBox自动完成条
Jul 22 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
Angular表单验证实例详解
Oct 20 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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
PR值查询 | PageRank 查询
2006/12/20 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
JS中==、===你分清楚了吗
2020/03/04 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
PyQt5每天必学之布局管理
2018/04/19 Python
django静态文件加载的方法
2018/05/20 Python
Selenium定位元素操作示例
2018/08/10 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
介绍一下gcc特性
2015/10/31 面试题
什么是会话Bean
2015/05/14 面试题
教师实习自我鉴定
2013/12/14 职场文书
个人求职信范文分享
2014/01/31 职场文书
会计工作态度自我评价
2015/03/06 职场文书
火烧圆明园观后感
2015/06/03 职场文书
功夫熊猫观后感
2015/06/10 职场文书
初三毕业感言
2015/07/31 职场文书
门卫管理制度范本
2015/08/05 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS