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写的一个DIV 弹出网页对话框
Aug 14 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
Apr 27 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 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
PHP初学者头疼问题总结
2006/07/08 PHP
php 字符串替换的方法
2012/01/10 PHP
php笔记之:AOP的应用
2013/04/24 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
表单内同名元素的控制
2006/11/22 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
python如何实现图片压缩
2020/09/11 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
工程业务员工作职责
2013/12/07 职场文书
社区工作感言
2014/02/21 职场文书
企业文化演讲稿
2014/05/20 职场文书
消防安全承诺书
2014/05/22 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
个人工作表现评价材料
2014/09/21 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
利用Redis实现点赞功能的示例代码
2022/06/28 Redis