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 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
JS中forEach()、map()、every()、some()和filter()的用法
May 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
Javascript的一种模块模式
2008/03/22 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python实现简单多人聊天室
2018/12/11 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python实现三壶谜题的示例详解
2020/11/02 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
如何保障Web服务器安全
2014/05/05 面试题
财务助理岗位职责
2013/11/10 职场文书
教师岗位职责范本
2013/12/29 职场文书
高二化学教学反思
2014/01/30 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
关爱残疾人标语
2014/06/25 职场文书
教师节倡议书2015
2015/04/27 职场文书
大学生见习总结报告
2015/06/24 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server