原生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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。