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实现仿Windows关机效果
Mar 10 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 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的分页功能
2007/03/21 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
JS原型对象通俗"唱法"
2012/12/27 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
canvas绘制多边形
2017/02/24 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python元组操作实例解析
2014/09/23 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python中退出多层循环的方法
2018/11/27 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python urllib爬虫模块使用解析
2019/09/05 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
小学开学典礼新闻稿
2015/07/17 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
介绍一下28个JS常用数组方法
2022/05/06 Javascript
MySQL池化框架学习接池自定义
2022/07/23 MySQL