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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP 上传文件大小限制
2009/07/05 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
浅谈PHP的反射API
2017/02/26 PHP
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
python如何从键盘获取输入实例
2020/06/18 Python
python re.match()用法相关示例
2021/01/27 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
周年庆促销方案
2014/03/15 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
python如何查找列表中元素的位置
2022/05/30 Python