原生JS实战：分享一个首页进度加载动画！

本文是苏福的原创文章，转载请注明出处：苏福CNblog：http://www.cnblogs.com/susufufu/p/5871134.html

该程序是本人的个人作品，写的不好，可以参考，但未经本人允许，请不要用于其它用途！

早上写了个首页进度加载动画，本想在我的博客里用上，测试发现博客园加载太快，根本看不到动画效果，直接就加载‘Complete’了，算了，还是不要把博客搞得太臃肿了！

于是我就写了个演示页面，在body里加了个iframe来加载大一点的网站，这样就看出效果了！

用Safari打开貌似CSS动画的播放时间变成同步了，不知道什么原因，本地测试又没问题（请大神指点！），用Chrome、Firefox倒是没问题，而IE我没测试过

加载时间统计我用了Windows对象的performance属性，它是专门用来来计算精确时间的方法，这是MDN关于performance属性的描述

本实例的实现原理比较简单，不过不是真正的按文件大小来显示加载进度的，只是在触发document.onreadystatechange事件时，根据document.readyState的状态来改变显示进度的。其实还有一种靠谱一点的方法，用XMLHttpRequest对象的实例的progress事件，详细解读XMLHttpRequest，如：

var request = new XMLHttpRequest();

    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中文参考手册网站，我表达能力有限，就不在这里嚼口舌了

下面是完整代码+演示：

苏福的作品

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_loading span{
position: absolute;
width: 10px;
height: 2px;
top: 0;
bottom: 0;
margin:auto;
background-color: #9b59b6;
animation: loading 1.5s infinite ease-in-out ;
}
#preloader_loading span:nth-child(2){
left: 12px;
animation-delay: .1s;
}
#preloader_loading span:nth-child(3){
left: 24px;
animation-delay: .2s;
}
#preloader_loading span:nth-child(4){
left: 36px;
animation-delay: .3s;
}
#preloader_loading span:nth-child(5){
left: 48px;
animation-delay: .4s;
}
#preloader_loading span:nth-child(6){
left: 50px;
animation-delay: .5s;
}
#preloader_loading span:nth-child(7){
left: 62px;
animation-delay: .6s;
}
#preloader_loading span:nth-child(8){
left: 74px;
animation-delay: .7s;
}
#preloader_loading span:nth-child(9){
left: 86px;
animation-delay: .8s;
}
@keyframes loading {
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: 1px solid green;
}
#preloader_line span{
display: block;
height: 2px;
width: 0;
background-color: green;
}