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+xml生成级联下拉框代码
Jul 24 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
vue如何在自定义组件中使用v-model
May 14 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 数组的一个悲剧?
2011/05/11 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python2与Python3的区别点整理
2019/12/12 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
.net开发工程师面试题
2014/02/25 面试题
函授本科自我鉴定
2013/11/03 职场文书
校园文化建设方案
2014/02/03 职场文书
安全先进班组材料
2014/12/26 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang