首页 > 代码库 > 【原生JS插件】LoadingBar页面顶部加载进度条
【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果：
看到手机上的浏览器内置了页面的加载进度条，想用在pc上。
网上搜了一下，看到几种页面loading的方法：
1.在body头部加入loading元素，在body页脚写入脚本让loading元素消失。
2.基于jquery，在页面的不同位置插入脚本，设置滚动条的宽度。
简单分析一下：
第一个明显不是我想要的。
第二个要在body前加载jquery，然后还要使用到jquery的动画方法，性能肯定达不到最优的状态。
自己的解决方法：原生JS+css3
上面的方法2其实是可以使用的方法，但是我不想在页面前加载jquery，怎么办？
很简单，自己用原生的方法写一个。
给元素添加css3的动画属性，让他能在改变宽度的时候有动画效果。
transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;
在页面插入一段style，里面有元素的css和一个css3动画暂停的类
.animation_paused{ -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -ms-animation-play-state:paused; animation-play-state:paused;}
然后在页面里不同的位置调用方法，设置滚动条的宽度即可，需要注意的是方法的引用要在<head></head>里
<div id="top"></div><script>LoadingBar.setWidth(1)</script><div id="nav"></div><script>LoadingBar.setWidth(20)</script><div id="banner"></div><script>LoadingBar.setWidth(40)</script><div id="main"></div><script>LoadingBar.setWidth(60)</script><div id="right"></div><script>LoadingBar.setWidth(90)</script><div id="foot"></div><script>LoadingBar.setWidth(100)</script>
插件源码：
/*========================================================================LoadingBar 页面加载进度条@auther LiuMing@blog http://www.cnblogs.com/dtdxrkdemo 在body里填写需要加载的进度LoadingBar.setWidth(number)========================================================================*/var LoadingBar = { /*初始化*/ init:function(){ this.creatStyle(); this.creatLoadDiv(); }, /*记录当前宽度*/ width:0, /*页面里LoadingBar div*/ oLoadDiv : false, /*开始*/ setWidth : function(w){ if(!this.oLoadDiv){this.init();} var oLoadDiv = this.oLoadDiv, width = Number(w) || 100; /*防止后面写入的width小于前面写入的width*/ (width<this.width) ? width=this.width : this.width = width; oLoadDiv.className = ‘animation_paused‘; oLoadDiv.style.width = width + ‘%‘; oLoadDiv.className = ‘‘; if(width === 100){this.over(oLoadDiv);} }, /*页面加载完毕*/ over : function(obj){ setTimeout(function(){ obj.style.display = ‘none‘; },1000); }, /*创建load条*/ creatLoadDiv : function(){ var div = document.createElement(‘div‘); div.id = ‘LoadingBar‘; document.body.appendChild(div); this.oLoadDiv = document.getElementById(‘LoadingBar‘); }, /*创建style*/ creatStyle : function(){ var nod = document.createElement(‘style‘), str = ‘#LoadingBar{transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;background-color:#f90;height: 3px;width:0; position: fixed;top: 0;z-index: 99999;left: 0;font-size: 0;z-index:9999999;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}.animation_paused{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-ms-animation-play-state:paused;animation-play-state:paused;};‘ nod.type = ‘text/css‘; //ie下 nod.styleSheet ? nod.styleSheet.cssText = str : nod.innerHTML = str; document.getElementsByTagName(‘head‘)[0].appendChild(nod); }}
【原生JS插件】LoadingBar页面顶部加载进度条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。