如何使用 XMLHttpRequest 事件在頁面載入期間顯示執行進度列？

在頁面載入期間顯示運行進度條

要在頁面載入時顯示運行進度條，與顯示運行進度條不同的方法需要靜態載入圖像。這可以透過利用 XMLHttpRequest (XHR) 物件提供的進度事件來實現。

在問題中提供的 JavaScript 程式碼中，window.load() 事件偵聽器用於在載入圖片時隱藏載入圖片。頁面已完成載入。要實現進度條，我們可以利用 XHR 物件的進度事件。

以下程式碼片段示範如何使用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 here
        console.log(percentComplete);
      }
    }, false);
    // Download progress
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        // Update the progress bar here
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data) {
    // Do something success-ish
  }
});</code>

此程式碼設定一個XHR 請求，其中包含上傳和下載進度的進度事件偵聽器。當上傳或下載的進度變更時，將觸發事件監聽器，您可以相應地更新進度條。

程式碼中的 console.log() 語句用於演示目的。您可以將它們替換為您自己的程式碼，根據百分比完成值更新進度條的外觀。

以上是如何使用 XMLHttpRequest 事件在頁面載入期間顯示執行進度列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！