jQuery实现页面滚动时动态加载内容的方法


Posted in Javascript onMarch 20, 2015

本文实例讲述了jQuery实现页面滚动时动态加载内容的方法。分享给大家供大家参考。具体分析如下:

很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到。

var loading = false;
$(window).scroll(function(){
 if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
  if(loading == false){
   loading = true;
   $('#loadingbar').css("display","block");
   $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
    $('body').append(loaded);
    $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
    $('#loadingbar').css("display","none");
    loading = false;
   });
  }
 }
});
$(document).ready(function() {
 $('#loaded_max').val(50);
});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
拉动滚动条加载数据的jquery代码
May 03 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 #Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 #Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 #Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 #Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 #Javascript
初识Node.js
Mar 20 #Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 #Javascript
You might like
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
JS event使用方法详解
2008/04/28 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
JS常用函数使用指南
2014/11/23 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
Windows下python2.7.8安装图文教程
2016/05/26 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python plotly绘制直方图实例详解
2019/07/22 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python链表类中获取元素实例方法
2021/02/23 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
医院护士的求职信
2014/01/03 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
美术教师自我鉴定
2014/02/12 职场文书
初中班主任评语大全
2014/04/24 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
六年级数学教学反思
2016/02/16 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python