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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
js选择器全面解析
Jun 27 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 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中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
python备份文件的脚本
2008/08/11 Python
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
django列表筛选功能的实现代码
2020/03/27 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
教导处工作制度
2014/01/18 职场文书
中学校庆方案
2014/03/17 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
企业法律事务工作总结
2015/08/11 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python