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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
node实现爬虫的几种简易方式
Aug 22 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php自动载入类用法实例分析
2016/06/24 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
初始Nodejs
2014/11/08 NodeJs
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python对列表排序的方法实例分析
2015/05/16 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
python图形用户接口实例详解
2019/12/16 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
大学生开西餐厅创业计划书
2014/02/01 职场文书
财务会计专业求职信
2014/06/09 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
库房管理员岗位职责
2015/02/12 职场文书
员工辞退通知书
2015/04/17 职场文书
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技