想要实现loading效果，实现得了解两个文档属性
1、document.onreadystatechange //页面加载状态改变
2、 document.readyState //该属性描述了文档的加载状态。
这两个属性的具体信息在这里就不赘述了，文档里有详细的解说。下面直接上网页loading的实例
1、gif图显示loding效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>通过加载状态事件</title> <style> .loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: white} .pic{width: 200px;height: 200px;background: url("./loading.gif");position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto} </style></head><body><div class="loading"> <div class="pic"></div></div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530355553324&di=2e1ede87f22112337ccce7ec0cf97386&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201406%2F20%2F20140620193408_hcjVU.jpeg" alt=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530355660779&di=7153fbb120fbfcd512383a7c3d06e7e2&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F5937a60ca3457.jpg" alt=""><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005783233,2516055246&fm=27&gp=0.jpg" alt=""><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3653772120,518447571&fm=27&gp=0.jpg" alt=""><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=734056024,4079806076&fm=27&gp=0.jpg" alt=""><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=171845386,3897452318&fm=27&gp=0.jpg" alt=""><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script></body></html>这里我拿了一些百度图片填充页面，然后给页面加了一 层遮罩层 ，最后将准备好的gif图放在页面最上面显示出来，这样子设置好了之后页面就一直是这个gif图，下面我们要用JS进行判断
<script> document.onreadystatechange=function () { if(document.readyState === "complete"){ $(".loading").fadeOut(); //如果文档加载完毕，那么就把遮罩层去掉 }}</script>页面就显示出来了。
2、用css3动画取代gif动图
CSS3的动画可以做很多事情，这里我们可以用动画来替代gif动图节省网络资源
<style> .loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: white} .pic{width: 50px;height: 50px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto} .loading .pic i {display: block;float: left;width: 6px;height: 50px;background: aqua;margin: 0 2px; -webkit-animation: load 1.2s infinite; animation: load 1.2s infinite} .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} @-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);} } </style><div class="loading"> <div class="pic"> <i></i> <i></i> <i></i> <i></i> </div></div>3、顶部进度条loding效果现在很常见的一种加载效果，就是顶部有一个加载条，对应网页加载的进度，这种loding效果其实就是再网页顶部设置一个 加载条，然后利用文档至上而下的加载方式来动态改变进度条的长度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>通过加载状态事件</title> <style> .loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: white} .pic{width: 10%;height: 5px;position: absolute;left: 0;top: 0;right: 0;background-color: aqua} </style> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.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=1530355553324&di=2e1ede87f22112337ccce7ec0cf97386&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201406%2F20%2F20140620193408_hcjVU.jpeg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530355660779&di=7153fbb120fbfcd512383a7c3d06e7e2&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F5937a60ca3457.jpg" alt=""></header><script>$(".loading .pic").animate({width:"30%"},100)</script><section> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3653772120,518447571&fm=27&gp=0.jpg" alt=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005783233,2516055246&fm=27&gp=0.jpg" alt=""></section><script>$(".loading .pic").animate({width:"60%"},100)</script><footer> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=734056024,4079806076&fm=27&gp=0.jpg" alt=""> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=171845386,3897452318&fm=27&gp=0.jpg" alt=""></footer><script>$(".loading .pic").animate({width:"100%"},100)</script><script> document.onreadystatechange=function () { if(document.readyState === "complete"){ $(".loading").fadeOut(); } }</script></body></html>4、根据网页加载情况而改变的百分比数字loding效果
这种就是根据网页的加载情况，然后去改变遮罩层的百分比数字，至于百分比如何判断每个网页都不一样