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第一课
Feb 27 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
vue递归获取父元素的元素实例
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
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
详细分析vue响应式原理
2020/06/22 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
在python中安装basemap的教程
2018/09/20 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
青春寄语大全
2014/04/09 职场文书
同居协议书范本
2014/04/23 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server