JS 비동기 로딩 진행 bar_javascript 기술에 대한 간략한 분석
- WBOY원래의
- 2016-05-16 15:02:141785검색
효과 표시:
1) 로드를 클릭하면 브라우저가 차단됩니다.
구현 아이디어:
1. 사용자가 비동기 요청을 수행하기 위해 로드 버튼을 클릭하면 메서드가 호출되고 로딩 바가 나타납니다.
2. 진행률 표시줄은 어떻게 구현하나요?
1) document.body에 div를 추가하고 브라우저를 덮습니다. 배경을 회색으로 설정합니다. z-index = 999. 사용자는 로드 시 인터페이스 값을 수정할 수 없습니다.
2) document.body에 동적 div를 추가합니다.
코드 구현:
Main.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="Loading.js" charset="utf-8"></script> <link rel="stylesheet" href="Loading.css" media="screen" title="no title" charset="utf-8"> </head> <body> <button onclick="showLoading()">Load</button> </body> </html>
Loading.js:
function showLoading()
{
var overDiv = document.createElement("div");
var loadingDiv = document.createElement("div");
var childDiv1 = document.createElement("div");
var childDiv2 = document.createElement("div");
var childDiv3 = document.createElement("div");
overDiv.classList.add('over');
loadingDiv.classList.add('spinner');
childDiv1.classList.add('bounce1')
childDiv2.classList.add('bounce2')
childDiv3.classList.add('bounce3')
loadingDiv.appendChild(childDiv1);
loadingDiv.appendChild(childDiv2);
loadingDiv.appendChild(childDiv3);
document.body.appendChild(overDiv);
document.body.appendChild(loadingDiv)
setTimeout(function()
{
document.body.removeChild(overDiv);
document.body.removeChild(loadingDiv)
}, 5000);
}
Loading.css
.spinner {
width: 150px;
text-align: center;
left: 50%;
top: 50%;
position: absolute;
z-index: 1000;
}
.over {
width: 100%;
height: 100%;
z-index: 998;
background-color: gray;
position:absolute;
top: 0px ;
left : 0px;
opacity: 0.2;
}
.spinner > div {
width: 30px;
height: 30px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
요약:
1. Ajax 요청을 호출할 때 진행률 표시줄 메서드를 사용하여 다시 캡슐화하는 방법을 제안할 수 있습니다.
2. Angular의 경우 http 호출을 모니터링하는 방법을 제공합니다. http 실행 요청을 모니터링할 때마다 진행률 표시줄 메서드를 호출하면 됩니다. http 실행 요청을 모니터링할 때마다 진행률 표시줄을 표시하기 위해 메서드를 호출할 필요가 없습니다.
위 내용은 에디터가 소개한 js 비동기 로딩 프로그레스 바와 관련된 내용이니 많은 분들께 도움이 되었으면 좋겠습니다!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.