看慕课网的视频，将内容记录下来，便于以后查询。
网页加载进度条的误区：一般进度条都是用定时器制作的，而非根据网页主体内容进行实现，这种定时器形式只能说在表现上实现了加载效果。
比如demo1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script> <style> .loading{ width: 100%; height: 100%; position: fixed; top:0; left:0; z-index: 100; background: #fff; } .loading .pic{ width: 64px; height: 64px; background:url(img/loading.gif); position: absolute; top:0; bottom:0; left: 0; right: 0; margin:auto; } </style> <script> $(function(){ var loading='<div class="loading"><div class="pic"></div></div>'; $("body").append(loading); setInterval(function(){ $(".loading").fadeOut(); },3000); }) </script> </head> <body> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832842&di=0190ba35a2d5145599a01b8f038c5ea2&imgtype=0&src=http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=6c3f6159e1f81a4c323fe48abf430a2c/500fd9f9d72a6059452132372234349b033bbaee.jpg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832841&di=f2d58906215d2f39b734ced294f4d1d4&imgtype=0&src=http://img4.duitang.com/uploads/item/201408/30/20140830185456_Eijik.jpeg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832840&di=42c43bbbf35dc54e9fabec17e92fd890&imgtype=0&src=http://img17.3lian.com/d/file/201702/22/1005a2e0825ffe290b3f697404ee8038.jpg" alt=""> </body> </html> 其中gif图是从网站：https://preloaders.net/ 下载的。通过加载状态事件制作进度条
demo2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script> <style> .loading{ width: 100%; height: 100%; position: fixed; top:0; left:0; z-index: 100; background: #fff; } .loading .pic{ width: 64px; height: 64px; background:url(img/loading.gif); position: absolute; top:0; bottom:0; left: 0; right: 0; margin:auto; } </style> <script> /* 通过加载状态事件制作进度条 document.onreadystatechange 页面加载状态改变时的事件 document.readyState 返回当前文档的状态 1.uninitialized -还未开始载入 2.loading -载入中 3.Interactive -已加载，文档与用户可以开始交互 4.complete -载入完成 */ document.onreadystatechange=function(){ if(document.readyState=="complete"){ $("loading").fadeOut(); } } </script> </head> <body> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=9236d306380e2994d5c860d1325077ff&imgtype=0&src=http://imgsrc.baidu.com/imgad/pic/item/574e9258d109b3deb13fbe4cc6bf6c81800a4c15.jpg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=4cb85c2aad7a50002762eb5f7c1b7929&imgtype=0&src=http://imgsrc.baidu.com/imgad/pic/item/b03533fa828ba61e5e6d4c0d4b34970a304e5915.jpg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832842&di=0190ba35a2d5145599a01b8f038c5ea2&imgtype=0&src=http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=6c3f6159e1f81a4c323fe48abf430a2c/500fd9f9d72a6059452132372234349b033bbaee.jpg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832841&di=f2d58906215d2f39b734ced294f4d1d4&imgtype=0&src=http://img4.duitang.com/uploads/item/201408/30/20140830185456_Eijik.jpeg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832840&di=42c43bbbf35dc54e9fabec17e92fd890&imgtype=0&src=http://img17.3lian.com/d/file/201702/22/1005a2e0825ffe290b3f697404ee8038.jpg" alt=""> </body> </html>demo3.html
<!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; left: 0; background: #f33; } </style> <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script> </head> <body> <div class="loading"> <div class="pic"></div> </div> <header> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=9236d306380e2994d5c860d1325077ff&imgtype=0&src=http://imgsrc.baidu.com/imgad/pic/item/574e9258d109b3deb13fbe4cc6bf6c81800a4c15.jpg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=4cb85c2aad7a50002762eb5f7c1b7929&imgtype=0&src=http://imgsrc.baidu.com/imgad/pic/item/b03533fa828ba61e5e6d4c0d4b34970a304e5915.jpg" alt=""> </header> <script> $(".loading .pic").animate({width:"10%"},100); </script> <section class="banner"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832842&di=0190ba35a2d5145599a01b8f038c5ea2&imgtype=0&src=http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=6c3f6159e1f81a4c323fe48abf430a2c/500fd9f9d72a6059452132372234349b033bbaee.jpg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832841&di=f2d58906215d2f39b734ced294f4d1d4&imgtype=0&src=http://img4.duitang.com/uploads/item/201408/30/20140830185456_Eijik.jpeg" alt=""> </section> <script> $(".loading .pic").animate({width:"30%"},100); </script> <section class="about"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832842&di=0190ba35a2d5145599a01b8f038c5ea2&imgtype=0&src=http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=6c3f6159e1f81a4c323fe48abf430a2c/500fd9f9d72a6059452132372234349b033bbaee.jpg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832841&di=f2d58906215d2f39b734ced294f4d1d4&imgtype=0&src=http://img4.duitang.com/uploads/item/201408/30/20140830185456_Eijik.jpeg" alt=""> </section> <script> $(".loading .pic").animate({width:"50%"},100); </script> <section class="pro"></section> <script> $(".loading .pic").animate({width:"80%"},100); </script> <section class="news"></section> <script> $(".loading .pic").animate({width:"95%"},100); </script> <footer></footer> <script> $(".loading .pic").animate({width:"100%"},100,function(){ $(".loading").fadeOut(); }); </script> </body> </html>
demo4.html
<!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: 100px; height: 100px; position: absolute; top:0; bottom:0; left: 0; right: 0; margin:auto; font-size: 28px; 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; -webkit-animation:rotate 1s infinite linear; animation:rotate 1s infinite linear; } @-webkit-keyframes rotate{ 0%{-webkit-transform:rotate(0deg);} 100%{transform:rotate(360deg);} } @keyframes rotate{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } </style> <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script> <script> $(function(){ var img=$("img"); var num=0; img.each(function(i){ oImg.οnlοad=null;//消除对于gif图的一直请求 var oImg=new Image(); oImg.οnlοad=function(){ num++; $(".loading .pic b").html(parseInt(num/$("img").size()*100)+"%"); if(num>=i){ $(".loading").fadeOut(); } } oImg.src=img[i].src; }); }); </script> </head> <body> <div class="loading"> <div class="pic"> <span></span> <b>0%</b> </div> </div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=9236d306380e2994d5c860d1325077ff&imgtype=0&src=http://imgsrc.baidu.com/imgad/pic/item/574e9258d109b3deb13fbe4cc6bf6c81800a4c15.jpg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502016414080&di=4cb85c2aad7a50002762eb5f7c1b7929&imgtype=0&src=http://imgsrc.baidu.com/imgad/pic/item/b03533fa828ba61e5e6d4c0d4b34970a304e5915.jpg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832842&di=0190ba35a2d5145599a01b8f038c5ea2&imgtype=0&src=http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=6c3f6159e1f81a4c323fe48abf430a2c/500fd9f9d72a6059452132372234349b033bbaee.jpg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832841&di=f2d58906215d2f39b734ced294f4d1d4&imgtype=0&src=http://img4.duitang.com/uploads/item/201408/30/20140830185456_Eijik.jpeg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501999832840&di=42c43bbbf35dc54e9fabec17e92fd890&imgtype=0&src=http://img17.3lian.com/d/file/201702/22/1005a2e0825ffe290b3f697404ee8038.jpg" alt=""> </body> </html>
