网页加载进度条
网页加载进度条
一、通过加载状态时间制作进度条
document.onreadystatechange //页面加载状态改变时的事件 document.readyState //返回当前文档状态
向服务器发送请求的状态：
1. uninitialized - 还未开始载入
2. loading - 载入中
3. interactive - 已加载，文芳与用户可以开始交互
4. complete - 载入完成
下面的例子是我写的一个简单的加载的动画，可以根据自己的需要自行编写
写一段加载动画的样式：
html：
<div id="loading" class="loading"> <div class="load_begin"></div> <div class="load_end"></div> </div>
css：
/*加载中动画*/ .loading{ width:100%; height: 100%; position: fixed; top: 0; left: 0; background: #fff; z-index: 999; } .load_begin{ width:20px; height: 20px; border-radius: 20px; position: absolute; top:0; left: 0; right: 0; bottom: 0; margin: auto; background:rgba(0,255,0,.6); animation: divRidu 1s ease-in infinite alternate; } .load_end{ width:40px; height: 40px; border-radius: 40px; position: absolute; top:0; left: 0; right: 0; bottom: 0; margin: auto; background:rgba(255,0,0,.1); animation: divRidu 1s ease-in 1s infinite alternate; } @keyframes divRidu { from { width:20px; height: 20px; border-radius: 20px; } to { width:40px; height: 40px; border-radius: 40px; } }
调用该方法，状态为 complete 时 隐藏 加载div
js：
document.onreadystatechange = function(){
if(document.readyState = 'complete'){
$("#loading").hide();
}
};
二、顶部固定的加载进度条
<!--固定在顶部的进度条--> <div id="loading-style4" class="loading"> <div class="style4-pic"></div> </div> <script> $(".style4-pic").animate({width:"10%"},100); </script> <section> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <script> $(".style4-pic").animate({width:"20%"},100); </script> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <script> $(".style4-pic").animate({width:"40%"},100); </script> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <script> $(".style4-pic").animate({width:"60%"},100); </script> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <script> $(".style4-pic").animate({width:"80%"},100); </script> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <script> $(".style4-pic").animate({width:"100%"},100); $("#loading-style4").fadeOut(); </script> </section>
css
/*加载中动画*/
.loading{
width:100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #fff;
z-index: 999;
}
.style4-pic{
width: 0%;
height: 5px;
position: absolute;
top:0;
left: 0;
background: red;
}
三、实时获取加载数据的进度条
<div id="loading-style3" class="loading"> <div class="style3-pic"> <span></span> <b>0%</b> </div> </div>
//添加图片 加载 <section> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt=""> </section>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
var img = $("img"); //获取所以得图片
var num = 0;
img.each(function(i){
var oImg = new Image();
oImg.onload=function(){
num ++;
$("#loading-style3 b").html(parseInt(num/img.length*100)+ '%');
if(img.length == num + 1) {
$("#loading-style3").hide();
}
};
oImg.src = img[i].src;
})
})
</script>
css
/*加载中动画*/
.loading{
width:100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #fff;
z-index: 999;
}
.style3-pic{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 20px;
}
.style3-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);}
}
