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 相关文章推荐
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
javascript实现倒计时效果
Feb 17 Javascript
编写一个javascript元循环求值器的方法
Apr 14 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 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
javascript中的对象创建 实例附注释
2011/02/08 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python饼状图的绘制实例
2019/01/15 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Python PO设计模式的具体使用
2019/08/16 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
4s客服专员岗位职责
2013/12/01 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
少先队活动总结
2014/08/29 职场文书
自查自纠整改报告
2014/11/06 职场文书
运动会运动员赞词
2015/07/22 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang