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 简介 让你知道extjs是什么
Dec 29 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
Javascript获取某个月的天数
May 30 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
原生js实现日期选择插件
May 21 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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基础知识:类与对象(5) static
2006/12/13 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php中filter_input函数用法分析
2014/11/15 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
深入解析Python中的urllib2模块
2015/11/13 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
如何在python中写hive脚本
2019/11/08 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
机关作风整顿个人整改措施2014
2014/09/17 职场文书
评先进个人材料
2014/12/29 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技