页面进度条
从很早之前就想知道页面的进度条是怎么实现的了，但发现好像不是自己想要的，不是就是不会，是什么flash的AS3里的
方法实现获取页面加载的进度，要不就是别的，这些都是未知的领域啊，不懂，然而HTML5也有这样获取文件大小的方法，
但没有进入深究，所以也暂时不能全面了解，但可以在已经的知识上完成这个效果，就是onload事件，页面上都是图片拖慢
页面加载进度而降低性能，不是就是JS文件过大，那么我们能就从这两个角度去把页面进度条完成了？
以下就是从onload这个方法实现页面进度条。
材料：
loading2
loading3
loading4
loading5
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .loading{ width: 120px; height: 140px; position: absolute; left: 50%; top:50%; margin-left: -60px; margin-top: -70px; } .load{ width: 120px; height: 100px; background: url(./img/loading3.png) no-repeat; position: absolute; top: 0; left: 0; animation: allMove 0.6s forwards infinite alternate linear; } @keyframes allMove{ from{ transform: trasnlateY(0) }to{ transform: translateY(7px); } } .load .loadIcon01{ width: 120px; height: 100px; background: url(./img/loading4.png) no-repeat; position: absolute; top: 0; left: 0; animation: move 1s forwards infinite linear; } @keyframes move{ from{ transform: rotate(0); }to{ transform: rotate(-360deg); } } .load .loadIcon02{ width: 120px; height: 100px; background: url(./img/loading5.png) no-repeat; position: absolute; top: 0; left: 0; animation: move02 1s infinite forwards linear; } @keyframes move02{ from{ transform: rotate(0); }to{ transform: rotate(360deg); } } .load .loadText{ position: absolute; top: 0; left:0; width: 100%; text-align: center; line-height: 100px; color: #f9725c; font:bold 16px/100px Arial; } .loadShadow{ position: absolute; bottom: 0; left: 0; background: url(./img/loading2.png) no-repeat; height: 40px; width: 100px; animation: move03 1s infinite forwards linear; } @keyframes move03{ from{ transform: scale(1); opacity: 1; }to{ transform: scale(0.8); opacity: 0.9; } } </style> </head> <body> <div class="loading"> <div class="load"> <div class="loadIcon01"></div> <div class="loadIcon02"></div> <div class="loadText">0%</div> </div> <div class="loadShadow"></div> </div> <!-- 实现页面加载进度条，如果js文件过大，要使用动态的加载来获取js加载成功是否 或使用异步加载的方式，一般网页的加载都是图片过大影响性能，所以判断图片加载完没有 就可以了 --> <script> /*var oHead=document.querySelector("head"); var oScript=document.createElement("script"); oScript.src="jquery-1.8.3.js"; oHead.appendChild(oScript); oScript.onload=function(){ alert("done"); }*/ /*图片实现页面进度条*/ var oload=document.querySelector(".load"); var oloadIco1=document.querySelector(".loadIcon01"); var oloadIco2=document.querySelector(".loadIcon02"); var oLoadtext=document.querySelector(".loadText"); var aImg=["http://g.hiphotos.baidu.com/image/pic/item/0823dd54564e92589f2fe1019882d158cdbf4ec1.jpg","http://b.hiphotos.baidu.com/image/pic/item/5d6034a85edf8db1c26bda640b23dd54564e746c.jpg","http://e.hiphotos.baidu.com/image/pic/item/8b13632762d0f7031db73fdc0afa513d2697c5ad.jpg","http://g.hiphotos.baidu.com/image/pic/item/1ad5ad6eddc451da7f05e1efb4fd5266d11632c7.jpg"]; var count=0; for(var i=0;i<aImg.length;i++){ var oImg=new Image(); oImg.src=aImg[i]; oImg.onload=function(){ count++; oLoadtext.innerHTML=count/aImg.length*100+"%"; if(count==aImg.length){ oload.style.animationPlayState="paused"; oloadIco1.style.animationPlayState="paused"; oloadIco2.style.animationPlayState="paused"; /*加载完成跳转页面*/ /*code****************/ } } /*图片出错的处理*/ oImg.onerror=function(){ count++; oLoadtext.innerHTML=count/aImg.length*100+"%"; /*处理代码*/ /*****code*****/ if(count==aImg.length){ oload.style.animationPlayState="paused"; oloadIco1.style.animationPlayState="paused"; oloadIco2.style.animationPlayState="paused"; /*加载完成跳转页面*/ /*code****************/ } } }; </script> </body> </html>
