當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【原生JS插件】LoadingBar页面顶部加载进度条
生活随笔
收集整理的這篇文章主要介紹了
【原生JS插件】LoadingBar页面顶部加载进度条
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先展示一下已經實現的效果：
預覽地址：http://dtdxrk.github.io/js-plug/LoadingBar/index.html
?
看到手機上的瀏覽器內置了頁面的加載進度條，想用在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/dtdxrk demo 在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); } }?
轉載于:https://www.cnblogs.com/dtdxrk/p/4165280.html
總結
以上是生活随笔為你收集整理的【原生JS插件】LoadingBar页面顶部加载进度条的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Redmi K50至尊版下周开卖：调校最
- 下一篇： JS同名方法，