小功能1：多种方法实现网页加载进度条
方法一：使用定时器
说明：定时器中放一个全屏的背景色，并添加一个gif图片，规定n秒后再隐藏此背景，给后台加载留一定时间。
缺点：当本地已有缓存时，还是会执行此定时器，体验不佳
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>定时器进度条</title> <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("body").append('<div class="loading"><img src="img/Flower.gif" ></div>'); setTimeout(function(){ $(".loading").fadeOut(); },3000) }) </script> <style type="text/css"> .loading { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #fff; } .loading img{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } </style> </head> <body> <img src="http://img1.imgtn.bdimg.com/it/u=3794341811,198002972&fm=26&gp=0.jpg" > <img src="http://img0.imgtn.bdimg.com/it/u=3081910561,4232742603&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=3924851449,159537211&fm=26&gp=0.jpg" > <img src="http://img1.imgtn.bdimg.com/it/u=4135296269,1136301264&fm=26&gp=0.jpg" > <img src="http://img1.imgtn.bdimg.com/it/u=2623748191,2154445708&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=4199878529,2086225900&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=4015368002,1586221549&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=246009171,2070901793&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=56560423,3204706921&fm=26&gp=0.jpg" > </html>
方法二：document.onreadystatechange监控加载状态
说明：document.onreadystatechange（页面加载状态改变的事件）；
document.readyState：
状态值：uninitialized（还未开始载入），loading（载入中），interactive（已加载，文档与用户可以开始交互），complete（载入完成）。
下面代码中用css3绘制了一个预加载时显示的小动画，当然也可引用已有的图片。核心代码为划线部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>进度条-readyState</title> <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ document.onreadystatechange = function(){ if(document.readyState == "complete"){ $(".loading").fadeOut(); } } }) </script> <style type="text/css"> .loading { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #fff; } /* 绘制进度条图形 */ .myicon { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 50px; height: 30px; } .myicon-item { width: 5px; height: 10px; background-color: green; float: left; margin-right: 5px; -webkit-animation: myicon 1s infinite; animation: myicon 1s infinite; } .item1 { -webkit-animation-delay: -1s; animation-delay: -1s; } .item2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .item3 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .item4 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .item5 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } @-webkit-keyframes myicon { 0% 100%{ -webkit-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(3); transform: scaleY(3); } } @keyframes myicon { 0% 100%{ -webkit-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(3); transform: scaleY(3); } } </style> </head> <body> <div class="loading"> <div class="myicon"> <div class="myicon-item item1"></div> <div class="myicon-item item2"></div> <div class="myicon-item item3"></div> <div class="myicon-item item4"></div> <div class="myicon-item item5"></div> </div> </div> <img src="http://img1.imgtn.bdimg.com/it/u=3794341811,198002972&fm=26&gp=0.jpg" > <img src="http://img0.imgtn.bdimg.com/it/u=3081910561,4232742603&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=3924851449,159537211&fm=26&gp=0.jpg" > <img src="http://img1.imgtn.bdimg.com/it/u=4135296269,1136301264&fm=26&gp=0.jpg" > <img src="http://img1.imgtn.bdimg.com/it/u=2623748191,2154445708&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=4199878529,2086225900&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=4015368002,1586221549&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=246009171,2070901793&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=56560423,3204706921&fm=26&gp=0.jpg" > </html>
方法三：给页面中重要节点后添加js代码，改变进度条显示（以显示在页面头部的进度条为例）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>进度条-头部</title> <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .loading { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #fff; } .loading .progress { position: absolute; top: 0; left: 0; width: 0%; height: 3px; background-color: #f33; } </style> </head> <body> <div class="loading"> <div class="progress"></div> </div> <img src="http://img1.imgtn.bdimg.com/it/u=3794341811,198002972&fm=26&gp=0.jpg" > <script type="text/javascript"> $(".loading .progress").animate({width : "10%"},100) </script> <img src="http://img0.imgtn.bdimg.com/it/u=3081910561,4232742603&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=3924851449,159537211&fm=26&gp=0.jpg" > <script type="text/javascript"> $(".loading .progress").animate({width : "30%"},100) </script> <img src="http://img1.imgtn.bdimg.com/it/u=4135296269,1136301264&fm=26&gp=0.jpg" > <img src="http://img1.imgtn.bdimg.com/it/u=2623748191,2154445708&fm=26&gp=0.jpg" > <script type="text/javascript"> $(".loading .progress").animate({width : "50%"},100) </script> <img src="http://img5.imgtn.bdimg.com/it/u=4199878529,2086225900&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=4015368002,1586221549&fm=26&gp=0.jpg" > <script type="text/javascript"> $(".loading .progress").animate({width : "70%"},100) </script> <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=246009171,2070901793&fm=26&gp=0.jpg" > <script type="text/javascript"> $(".loading .progress").animate({width : "90%"},100) </script> <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=56560423,3204706921&fm=26&gp=0.jpg" > <script type="text/javascript"> $(".loading .progress").animate({width : "100%"},100,function(){ $(".loading").fadeOut(); }) </script> </html>
方法四：实时监控页面中加载情况，显示响应百分比（页面加载进度慢，一般都是图片、视频、音频较多，以下以图片为例，根据图片加载进度显示页面加载百分比）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>进度条-百分比</title> <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var sum = 0; var $img = $("body img"); $img.each(function(i){ var proImage = new Image(); proImage.onload = function(){ proImage.onload = null; sum++; var progress = parseInt(sum/$img.length * 100); $(".loading .progress b").text(""+progress + "%"); if(sum >= i){ $(".loading").fadeOut(); } } proImage.src = $img[i].src;//若将赋值放在onload之前,当页面第二次加载时,将直接赋src值,不会再执行onload事件 }) }) </script> <style type="text/css"> * { box-sizing: border-box; } .loading { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #fff; } .loading .progress{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100px; height: 100px; text-align: center; line-height: 100px; font-size: 22px; } .loading .progress span { display: block; position: absolute; left: 10px; top: 10px; width: 80px; height: 80px; border-radius: 50%; -webkit-box-shadow: 0 3px 0 #666; box-shadow: 0 3px 0 #666; -webkit-animation: myicon 1s infinite linear; animation: myicon 1s infinite linear; } @-webkit-keyframes myicon { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes myicon { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="loading"> <div class="progress"> <span></span> <b>0%</b> </div> </div> <img src="http://img1.imgtn.bdimg.com/it/u=3794341811,198002972&fm=26&gp=0.jpg" > <img src="http://img0.imgtn.bdimg.com/it/u=3081910561,4232742603&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=3924851449,159537211&fm=26&gp=0.jpg" > <img src="http://img1.imgtn.bdimg.com/it/u=4135296269,1136301264&fm=26&gp=0.jpg" > <img src="http://img1.imgtn.bdimg.com/it/u=2623748191,2154445708&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=4199878529,2086225900&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=4015368002,1586221549&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=246009171,2070901793&fm=26&gp=0.jpg" > <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" > <img src="http://img2.imgtn.bdimg.com/it/u=56560423,3204706921&fm=26&gp=0.jpg" > </html>
笨鸟学习途中，有问题尽管提，谢谢
