原生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中文参考手册网站,我表达能力有限,就不在这里嚼口舌了
下面是完整代码+演示:
posted on 2016-09-14 11:08 SuriFuture 阅读(2319) 评论(3) 编辑 收藏 举报