原生JS实现首页进度加载动画

在加载数据的时候，我们的页面有时候会出现无法显示的情况，这种情况通常是动画flash加载的页面居多，那么原生JS实现首页进度加载动画要怎么实现呢？今天爱站技术频道小编主要为大家带来介绍，大家可以参考下文学习。

早上写了个首页进度加载动画，本想在我的博客里用上，测试发现博客园加载太快，根本看不到动画效果，直接就加载‘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中文参考手册网站，我表达能力有限，就不在这里嚼口舌了 。

如果您正在因为找不到原生JS实现首页进度加载动画的解决方法，不如来js.aizhan.com找一找，肯定可以找到您想要的知识，希望爱站技术频道小编收集整理的内容对您有用哦!