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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 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 开源AJAX框架14种
2009/08/24 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
JQuery live函数
2010/12/24 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
js图片放大镜效果实现方法详解
2020/10/28 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
推荐11个实用Python库
2015/01/23 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
Java面试题及答案
2012/09/08 面试题
心理健康教育制度
2014/01/27 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
app场景下uniapp的扫码记录
2022/07/23 Java/Android