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中面向对象技术的模拟
Sep 25 Javascript
jquery 模式对话框终极版实现代码
Sep 28 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
JavaScript实用代码小技巧
2018/08/23 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python实现汇率转换操作
2020/05/03 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
自荐信写法介绍
2014/01/25 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android