효과 표시 :
1) 하중을 클릭 할 때 시뮬레이션은 비동기로드를 수행합니다. 브라우저가 차단되었습니다. 진행률 표시 줄이 나타납니다.
구현 아이디어 :
1. 사용자가로드 버튼을 클릭하여 비동기 요청을 실행할 때. 메소드가 호출되면로드 바가 나타납니다.
2. 진행률 표시 줄을 구현하는 방법은 무엇입니까?
1) 문서에 새 div를 추가하십시오. 브라우저를 덮어 씁니다. 배경을 회색으로 설정합니다. z-index = 999. 사용자는로드 할 때 인터페이스 값을 수정할 수 없습니다.
2) doccure.body에 동적 div를 추가하십시오.
코드 구현 :
main.html :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> </title> <스크립트 src = "loading.js"charset = "utf-8"> </script> <link rel = "stylesheet"href = "롯지 onclick = "showloading ()">로드 </button> </body> </html>
Loading.js :
함수 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.a dd ( 'bounce1') childdiv2.classlist.add ( 'bounce2') childdiv3.classlist.add ( 'bounce3') loadingdiv.appendchild (childdiv1); lo Adingdiv. AppendChild (ChildDiv2); LoadingDiv. AppendChild (childdiv3); document.body.appendChild (Overdiv); document.body.appendChild (loadingDiv) settimeout (function () {document.body.removechild (overdiv); document.body.removechild (loadingdiv)}, 5000);}로딩 .CSS
.spinner {width : 150px; 텍스트-정렬 : 중심; 왼쪽; 왼쪽; 왼쪽; 왼쪽; 왼쪽; 상단 : 50%; 위치 : 절대; Z-index : 1000;}. 30px; 배경색 : #67cf22; Border-Radius : 100%; 디스플레이 : Inline-Block; -WebKit-Animation : BouncedElay 1.4S 무한 편안함; 애니메이션 : BouncedElay 1.4S Infinite Easy-in-out;/ * 애니메이션이 시작될 때 첫 번째 프레임 방지 */-WebKit-Animation-Fill-Mode :; .bounce1 {-webkit-animation-delay : -0.32s; 애니메이션-델리 : -0.32s;}. 스피너. -webkit-transform : scale (0.0)} 40% {-webkit-transform : scale (1.0)}}@keyframes bouncedelay {0%, 80%, 100% {변환 (0.0);-webkit-transform : scale (0.0);} 40% {scale (1.0);-webkit-transform : (1.0);}.요약 :
1. 방법을 올릴 수 있습니다. AJAX 요청을 다시 캡슐화하십시오. AJAX 요청을 호출 할 때 자동 막대 방법을 구현하십시오.
2. 각도 인 경우 각도는 HTTP 호출을 모니터링하는 방법을 제공합니다. HTTP 실행 요청을 모니터링 할 때 진행률 표시 줄 방법을 호출하십시오. HTTP 호출을 실행하고 HTTP 실행 요청을 모니터링 할 때마다 진행 상황 바 메소드를 호출 할 필요가 없습니다. HTTP를 실행할 때마다 진행 상황 바 메소드를 직접 호출 할 필요가 없습니다.
위의 내용은 편집자가 귀하에게 소개 한 JS 비동기로드 진행 상황과 관련이 있습니다. 나는 그것이 모두에게 도움이되기를 바랍니다!