如何使用 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中文網其他相關文章！