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 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
js中Object.create实例用法详解
Oct 05 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中apc缓存使用示例
2013/12/25 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
上海方立数码笔试题
2013/10/18 面试题
JAVA程序员自荐书
2014/01/30 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
社区重阳节活动总结
2015/03/24 职场文书