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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
VUE实现日历组件功能
Mar 13 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
Django+Vue跨域环境配置详解
Jul 06 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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函数
2006/10/09 PHP
php获取汉字首字母的函数
2013/11/07 PHP
详解php命令注入攻击
2019/04/06 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
accesskey 提交
2006/06/26 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python的pip有什么用
2020/06/17 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
关于廉洁的广播稿
2014/01/30 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
公司门卫岗位职责
2014/03/15 职场文书
普通党员个人整改措施
2014/10/27 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
中秋节感想
2015/08/10 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
golang为什么要统一错误处理
2022/04/03 Golang