JavaScript实现网页加载进度条代码超简单


Posted in Javascript onSeptember 21, 2015

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果。

HTML

首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现0-100%的加载显示过程。

因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行大概的模糊进度反馈来实现进度加载的效果。大致意思是:页面每加载到指定区域,则返回(n)%的进度结果,通过设置多个节点,来达到一步一步显示加载进度的目的。

假如有一个页面,按区块分为页头、左侧内容、右边侧栏、页脚四部分,我们把这四部分作为四个节点,当页面加载每一个节点后,设置大概加载百分比,页面结构如下:

<div id="header"> 
页头部分 
</div> 
<div id="mainpage"> 
左侧内容 
</div> 
<div id="sider"> 
右边侧栏 
</div> 
<div id="footer"> 
页脚部分 
</div>

然后我们在<body>下的第一行加上进度条.loading。

<div class="loading"></div>

CSS

我们要设置loading进度条的样式,设置背景色,高度,以及位置,优先级等。

.loading{ 
 background:#FF6100; //设置进度条的颜色 
 height:5px; //设置进度条的高度 
 position:fixed; //设定进度条跟随屏幕滚动 
 top:0; //将进度条固定在页面顶部 
 z-index:99999 //提高进度条的优先层级,避免被其他层遮挡 
}

jQuery

接下来,我们要在每个节点后面加上进度动画,使用jQuery来实现。

<div id="header"> 
页头部分</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'33%'},50); 
 //第一个进度节点 
</script> 
<div id="mainpage"> 
左侧内容 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'55%'},50); 
//第二个进度节点 
</script> 
<div id="sider"> 
右边侧栏 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'80%'},50); 
//第三个进度节点 
</script> 
<div id="footer"> 
页脚部分 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'100%'},50); 
 //第四个进度节点 
</script>

可以看出,没加载一个节点后,jQuery调用animate()动画方法实现进度条宽度的变化,每个节点变化以50毫秒时间让进度条看起来更流畅些,最终从0%变化到100%,完成了进度条的进度动画。

当进度条达到100%后,页面加载完成,最后还有一步要做的就是隐藏进度条。

$(document).ready(function(){ 
 $('.loading').fadeOut();  
});
Javascript 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
Javascript验证方法大全
Sep 21 #Javascript
JavaScript验证Email(3种方法)
Sep 21 #Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 #Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 #Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 #Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 #Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 #Javascript
You might like
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
javascript第一课
2007/02/27 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
用C++封装MySQL的API的教程
2015/05/06 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python ssh 执行shell命令的示例
2020/09/29 Python
Python进行特征提取的示例代码
2020/10/15 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
开业庆典邀请函
2014/01/08 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
党员作风建设整改方案
2014/10/27 职场文书
刑事附带民事代理词
2015/05/25 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
我收到了德劲DE1107
2022/04/05 无线电
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers