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写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 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转成EXE文件
2006/10/09 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python实现115网盘自动下载的方法
2014/09/30 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python 基础知识之字符串处理
2017/01/06 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
生日寿宴答谢词
2014/01/19 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
个人承诺书格式范文
2015/04/29 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸