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

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

下面是完整代码+演示：

 
 
 
 



 

 Loading...
 
 
 
 

 
 
 
 
 
 
 
 
 
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。