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 相关文章推荐
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
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
自动跳转中英文页面
2006/10/09 PHP
php防止用户重复提交表单
2015/11/02 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
PHP如何调用MYSQL存储过程
2014/05/30 面试题
中学家长会邀请函
2014/02/03 职场文书
工作迟到检讨书
2014/02/21 职场文书
人大调研汇报材料
2014/08/14 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
SpringAop日志找不到方法的处理
2021/06/21 Java/Android