페이지 로드 중에 실행 중인 진행률 표시줄 표시
페이지가 로드되는 동안 진행률 표시줄이 실행되도록 하려면 XMLHttpRequest(XHR ) JavaScript의 개체입니다. XHR 객체는 요청의 업로드 및 다운로드 진행 상황을 모니터링할 수 있는 진행 이벤트를 제공합니다.
다음은 jQuery를 사용하여 진행률 표시줄을 설정하는 예입니다.
<code class="javascript">$.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); // Upload progress xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; // Update the progress bar based on the upload progress } }, false); // Download progress xhr.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; // Update the progress bar based on the download progress } }, false); return xhr; }, type: 'POST', url: "/", data: {}, success: function(data) { // Do something success-ish } });</code>
이 스크립트에서 , xhr 함수는 새로운 XMLHttpRequest 객체를 생성하고 업로드 및 다운로드 진행을 위한 이벤트 리스너를 등록합니다. 이러한 이벤트 리스너는 전송된 데이터의 비율에 따라 진행률 표시줄을 계산하고 업데이트하는 역할을 담당합니다.
기존 코드로 이 작업을 수행하려면 $(window).load 함수를 다음으로 바꿔야 합니다. 위의 $.ajax 호출. URL 및 데이터 매개변수가 요청에 맞게 적절하게 설정되었는지 확인하세요.
CSS를 사용하여 진행률 표시줄의 스타일을 지정하여 시각적 표현을 제공하는 것을 잊지 마세요. 디자인 선호도에 맞게 너비, 높이, 색상, 애니메이션을 맞춤 설정할 수 있습니다.
위 내용은 JavaScript를 사용하여 페이지를 로드하는 동안 실행 중인 진행률 표시줄을 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!