원시 JS로 홈페이지 진행 로드 애니메이션 구현

js 진행 로드 애니메이션 프로그램은 저의 개인 작품입니다. 잘 썼지 않지만 참고할 수 있습니다. 하지만 저의 허락 없이 다른 용도로 사용하지 마세요!　

오전에 홈페이지 진행 로드 애니메이션을 만들었는데, 내 블로그에 사용하려고 했지만, 테스트를 통해 블로그가 너무 빠르게 로드되어 애니메이션 효과를 볼 수 없이, 'Complete'로 바로 로드되더니, 그래도 블로그를 너무 두툼하게 하지 않는 것이 좋을 것 같아서 그쳤습니다!　

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

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

加载时间统计我使用了Window对象的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中文参考手册网站，表达能力有限，这里就不多说了　

以下是完整代码+演示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>수복의 작품</title>
 <script>
 document.onreadystatechange = function () {
 function $id(id){return document.getElementById(id)}
 var width = 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 = 'Loading Complete'+"<br/">+"Using: "+performance.now().toFixed(3)+" ms"
 preloader_btn.innerHTML = 'E N T E R';
 preloader_btn.style.borderBottom = '"4px solid green';
 preloader_btn.style.fontStyle = 'inherit';
 preloader_btn.style.fontSize = '"24px';
 if(document.styleSheets[0].insertRule){
 document.styleSheets[0].insertRule('#preloader_btn:hover{border-bottom: 4px solid green; border-radius: 60px; 색상: 빨간색;}',0);
 }else{//IE와 호환9다음
 document.styleSheets[0].addRule('#preloader_btn:hover{border-bottom: 4px solid green; border-radius: 60px; 색상: 빨간색;}',0);
 }
 preloader_btn.onclick = function () {
 var opacity = 1,id;
 function hide(){
 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();
 };
 }
 function loading(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_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;
 }
 </style>
</head>
<body>
<div id="preloader">
 <div id="preloader_center">
 <span id="preloader_btn">Loading...</span>
 <span id="preloader_line">
 <span></span>
 </span>
 <div id="preloader_loading">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </div>
 </div>
</div>
<iframe src="http://jd.com"></iframe>
</body>
</html>

이것이 본 문서의 모든 내용입니다. 많은 도움이 되었기를 바랍니다. 또한, 나아가는 가이드를 많이 지지해 주시기 바랍니다.

고지사항: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 자체로 업로드한 내용으로, 본 사이트는 소유권을 가지지 않으며, 인공 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용을 발견하시면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 (이메일 작성 시 #을 @으로 변경하시오) 신고를 해 주시고 관련 증거를 제공해 주시면, 사실이 확인되면 해당 사이트는 즉시 저작권 침해 내용을 삭제할 것입니다.

기본 가이드

좋아하는 것