通过网页加载状态事件制作进度条

效果图：



事件：

1、document.onreadystatechance  页面加载状态改变时的事件

2、document.readyState  返回当前文档的状态

      还未载入：uninitialized

      载入中：loading

      已加载，文档与用户可以开始交互：interactive

      载入完成：complete

<div class="loading">
<div class="pic">
<span></span>
<b>0%</b>
</div>
</div>

css:

<style lang="">
* {
padding: 0;
margin: 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;
left: 0;
bottom: 0;
right: 0;
margin: auto;
border: 1px solid red;
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;
-webkit-animation: rotate 1s infinite linear;
}

@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>

js:

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(function() {
var img = $("img");
var num = 0;

img.each(function(i) {
var oImg = new Image();

oImg.onload = function() {
num++;
$(".loading b").html(parseInt(num / $("img").length * 100) + "%");
if (num >= i) {
$(".loading").fadeOut();
}
}
oImg.src = img[i].src;
});
})
</script>