페이지 로딩 중에 동적 진행률 표시줄을 구현하는 방법은 무엇입니까?

페이지 로딩 중 동적 진행률 표시줄 표시

로딩 화면 중 실시간 피드백의 필요성이 점점 더 중요해지고 있습니다. 정적 이미지 대신 사용자에게 로딩 프로세스의 시각적 표현을 제공하는 실행 중인 진행률 표시줄을 구현하는 방법을 살펴보겠습니다.

진행률 표시줄을 구현하기 위해 XMLHttpRequest(XHR) 개체의 진행률 이벤트를 활용합니다. 이 이벤트를 통해 업로드 및 다운로드 진행 상황을 실시간으로 모니터링할 수 있습니다. 예는 다음과 같습니다.

<code class="js">$.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
        console.log(percentComplete);
      }
    }, false);
    // Download progress
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        // Update the progress bar
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data) {
    // Hide the progress bar after successful loading
  }
});</code>

이 스크립트는 업로드 또는 다운로드가 진행될 때마다 콜백을 트리거하는 XMLHttpRequest 객체에 이벤트 리스너를 연결합니다. 콜백 내에서 완료율을 계산하고 콘솔 로그에 값을 기록합니다. 이 정보는 진행률 표시줄을 동적으로 업데이트하여 사용자에게 페이지 로딩 프로세스 상태에 대한 시각적 신호를 제공하는 데 사용될 수 있습니다.

위 내용은 페이지 로딩 중에 동적 진행률 표시줄을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!