JavaScript를 사용하여 페이지를 로드하는 동안 실행 중인 진행률 표시줄을 표시하는 방법은 무엇입니까?

페이지 로드 중에 실행 중인 진행률 표시줄 표시

페이지가 로드되는 동안 진행률 표시줄이 실행되도록 하려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!