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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 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 EOT定界符的使用详解
2008/09/30 PHP
php定界符
2014/06/19 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
python 合并文件的具体实例
2013/08/08 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
个人投资计划书
2014/05/01 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL