进度条
关于进度条的制作，终于在慕课网找到详解，看完之后收获匪浅。总结一下大神教给我的知识。
我们通过document.onreadystatechange判断页面是否加载完。
document.onreadystatechange 页面加载状态改变时的事件
document.readyState 返回当前文档的状态
1.uninitialized-还未开始载入
2.loading -载入中
3.interactive -已加载，文档与用户可以开始交互
4.complete -载入完成
1、根据css3制作加载进度条：
根据css3制作加载进度条，通过document.onreadystatechange判断页面是否加载完，加载完毕，进度条消失。这种方法的弊端就是无法实时获取加载进度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3进度条小动画</title> <style> .loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;} .loading .pic {width: 50px;height: 50px;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;} .loading .pic i{display: block;float: left;width: 6px;height: 50px;background: #399;margin: 0 2px;-webkit-transform: scaleY(0.4);-ms-transform: scaleY(0.4); transform: scaleY(0.4);-webkit-animation: load 1.2s infinite;animation: load 1.2s infinite;} @-webkit-keyframes load { 0%,40%,100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4)} 20%{-webkit-transform:scaleY(1);transform:scaleY(1)} } @keyframes load { 0%,40%,100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4)} 20%{-webkit-transform:scaleY(1);transform:scaleY(1)} } .loading .pic i:nth-child(1){} .loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s} .loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s} .loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s} .loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s} </style> </head> <body> <div class="loading"> <div class="pic"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt=""> <script src="../js/jquery.js"></script> <script> $(function () { document.onreadystatechange = function () { if (document.readyState == "complete") { $(".loading").fadeOut(); } } }); </script> </body> </html>
2.定位在头部的进度条
在每个区域后面加script，从最初的0%一直显示到100%，完全是按照自上到下的加载顺序来实现这种效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位在头部的进度条</title> <style> .loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;} .loading .pic {width: 0%;height: 5px;position: absolute;top: 0;bottom: 0;background: #f33} </style> <script src="../js/jquery.js"></script> </head> <body> <div class="loading"> <div class="pic"></div> </div> <header> <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt=""> </header> <script> $('.loading .pic').animate({width:"10%"},100); </script> <section class="banner"> <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt=""> </section> <script> $('.loading .pic').animate({width:"30%"},100); </script> <section class="about"> <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt=""> </section> <script> $('.loading .pic').animate({width:"50%"},100); </script> <section class="pro"> <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt=""> </section> <script> $('.loading .pic').animate({width:"70%"},100); </script> <section class="news"> <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt=""> </section> <script> $('.loading .pic').animate({width:"90%"},100); </script> <footer> <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt=""> </footer> <script> $('.loading .pic').animate({width:"100%"},100,function () { $('.loading').fadeOut(); }); </script> </body> </html>
3.实时获取加载数据的进度条
通过获取页面所有的图片，实时获取加载进度百分比，为保证兼容性，src一定要写在onload的后面，否则程序会在IE7出错。为保证流畅性，在onload事件内部先把onload事件置为null。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实时获取加载数据的进度条</title> <style> *{margin: 0;padding: 0} .loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;} .loading .pic {width: 100px;height: 100px;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;font-size: 30px;text-align: center;line-height: 100px} .loading .pic span{display: block;width:80px;height: 80px;position: absolute;top: 10px;left: 10px;border-radius: 50%;box-shadow: 0 3px 0 #666;animation: rotate 1s infinite linear} @keyframes rotate { 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} } @-webkit-keyframes rotate { 0%{-webkit-transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg);} } </style> </head> <body> <div class="loading"> <div class="pic"> <span></span> <b>0%</b> </div> </div> <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=3058668829,3584059364&fm=26&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=1870203556,2400775406&fm=200&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=3345613708,3746168634&fm=200&gp=0.jpg" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=3336150276,669541811&fm=26&gp=0.jpg" alt=""> <img src="http://img2.imgtn.bdimg.com/it/u=4000700326,1190583608&fm=26&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=2010293466,2543411560&fm=200&gp=0.jpg" alt=""> <script src="../js/jquery.js"></script> <script> $(function () { var img=$("img"); var num = 0; img.each(function (i) { var oImg = new Image(); oImg.onload=function () { oImg.onload=null; num++; $(".loading b").html(parseInt(num/$("img").size()*100)+"%"); if(num>=i){ $(".loading").fadeOut(); } }; oImg.src = img[i].src; }) }); </script> </body> </html>
慕课网关于进度条部分的观看地址：http://www.imooc.com/learn/858。老师的声音像播报员，很好听，哈哈哈。
