原生JS实现首页进度加载动画
js进度加载动画程序是本人的个人作品，写的不好，可以参考，但未经本人允许，请不要用于其它用途！
早上写了个首页进度加载动画，本想在我的博客里用上，测试发现博客园加载太快，根本看不到动画效果，直接就加载‘Complete'了，算了，还是不要把博客搞得太臃肿了！
于是我就写了个演示页面，在body里加了个iframe来加载大一点的网站，这样就看出效果了！
用Safari打开貌似CSS动画的播放时间变成同步了，不知道什么原因，本地测试又没问题（请大神指点！），用Chrome、Firefox倒是没问题，而IE我没测试过
加载时间统计我用了Windows对象的performance属性，它是专门用来来计算精确时间的方法，这是MDN关于performance属性的描述
本实例的实现原理比较简单，不过不是真正的按文件大小来显示加载进度的，只是在触发document.onreadystatechange事件时，根据document.readyState的状态来改变显示进度的。其实还有一种靠谱一点的方法，用XMLHttpRequest对象的实例的progress事件，详细解读XMLHttpRequest，如：
varrequest=newXMLHttpRequest();
request.onprogress=function(e){
if(e.lengthComputable){//lengthComputable是指文件是否有大小，值为true、false
progress.innerHTML=Math.round(100*e.loaded/e.total)+\'%\';//loaded、total表示已经加载的大小和总大小
}
}
用以上方法实现起来也挺麻烦，而且也不能实现100%的真实加载进度，所以我索性就假一点了，不用他了！
本实例还用到了document.styleSheets[0].insertRule()方法，这里有我对它的总结：用原生JS读写CSS样式的方法总结
关于CSS动画的实现，大家自己看代码吧，很简单的代码，如果看的吃力，建议去补补CSS基础了，介绍个干货，CSS中文参考手册网站，我表达能力有限，就不在这里嚼口舌了
下面是完整代码+演示：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>苏福的作品</title>
<script>
document.onreadystatechange=function(){
function$id(id){returndocument.getElementById(id)}
varwidth=0,id,
preloader_line=$id('preloader_line').firstElementChild,
preloader=$id('preloader'),
preloader_center=$id('preloader_center'),
preloader_btn=$id('preloader_btn'),
preloader_loading=$id('preloader_loading');
if(document.readyState=="interactive"){
loading(1,110,50);
}
if(document.readyState=="complete"){
loading(5,120,16.7);
preloader_loading.id='preloader_loaded';
preloader_loading.innerHTML='LoadingComplete'+'<br/>'+'Using:'+performance.now().toFixed(3)+'ms';
preloader_btn.innerHTML='ENTER';
preloader_btn.style.borderBottom='4pxsolidgreen';
preloader_btn.style.fontStyle='inherit';
preloader_btn.style.fontSize='24px';
if(document.styleSheets[0].insertRule){
document.styleSheets[0].insertRule('#preloader_btn:hover{border-bottom:4pxsolidgreen;border-radius:60px;color:red;}',0);
}else{//兼容IE9以下
document.styleSheets[0].addRule('#preloader_btn:hover{border-bottom:4pxsolidgreen;border-radius:60px;color:red;}',0);
}
preloader_btn.onclick=function(){
varopacity=1,id;
functionhide(){
if(opacity<=0){
clearTimeout(id);
preloader.style.display='none';
document.body.style.overflow='auto';
return;
}
opacity-=0.1;
preloader.style.opacity=opacity;
id=setTimeout(function(){
hide();
},50);
}
hide();
};
}
functionloading(step,max,time){
if(width>=max){
clearTimeout(id);
if(max>=120){
preloader_line.parentNode.style.display='none';
}
return;
}
width+=step;
preloader_line.style.width=width+'px';
id=setTimeout(function(){
loading(step,max,time);
},time);
}
};
</script>
<style>
body{
overflow:hidden;
}
#preloader{
position:absolute;
width:100%;
height:100%;
background-color:white;
z-index:999;
}
#preloader_center{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:150px;
height:75px;
margin:auto;
}
#preloader_loading{
position:absolute;
left:0;
right:0;
top:45px;
margin:auto;
width:96px;
height:30px;
}
#preloader_loaded{
position:absolute;
left:0;
right:0;
top:45px;
margin:auto;
font-size:12px;
text-align:center;
line-height:30px;
}
#preloader_loadingspan{
position:absolute;
width:10px;
height:2px;
top:0;
bottom:0;
margin:auto;
background-color:#9b59b6;
animation:loading1.5sinfiniteease-in-out;
}
#preloader_loadingspan:nth-child(2){
left:12px;
animation-delay:.1s;
}
#preloader_loadingspan:nth-child(3){
left:24px;
animation-delay:.2s;
}
#preloader_loadingspan:nth-child(4){
left:36px;
animation-delay:.3s;
}
#preloader_loadingspan:nth-child(5){
left:48px;
animation-delay:.4s;
}
#preloader_loadingspan:nth-child(6){
left:50px;
animation-delay:.5s;
}
#preloader_loadingspan:nth-child(7){
left:62px;
animation-delay:.6s;
}
#preloader_loadingspan:nth-child(8){
left:74px;
animation-delay:.7s;
}
#preloader_loadingspan:nth-child(9){
left:86px;
animation-delay:.8s;
}
@keyframesloading{
0%{height:2px;background:#9b59b6;}
15%{height:20px;background:#3498db;}
50%{height:2px;background:#9b59b6;}
100%{height:2px;background:#9b59b6;}
}
iframe{width:100%;height:1000px;}
#preloader_btn{
position:absolute;
left:0;
right:0;
top:0;
margin:auto;
display:block;
width:122px;
height:40px;
font-size:14px;
text-align:center;
line-height:40px;
cursor:pointer;
color:#9b59b6;
font-style:italic;
-webkit-transition:all.5s;
-moz-transition:all.5s;
-ms-transition:all.5s;
-o-transition:all.5s;
transition:all.5s;
}
#preloader_line{
position:absolute;
left:0;
right:0;
top:40px;
margin:auto;
width:120px;
height:2px;
border:1pxsolidgreen;
}
#preloader_linespan{
display:block;
height:2px;
width:0;
background-color:green;
}
</style>
</head>
<body>
<divid="preloader">
<divid="preloader_center">
<spanid="preloader_btn">Loading...</span>
<spanid="preloader_line">
<span></span>
</span>
<divid="preloader_loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<iframesrc="http://jd.com"></iframe>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。