如何實作頁面載入時動態進度條？

在頁面載入期間顯示動態進度條

載入螢幕期間對即時回饋的需求變得越來越重要。讓我們探索如何實作一個運行進度條，而不是靜態映像，為使用者提供載入過程的視覺化表示。

為了實現進度條，我們利用 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中文網其他相關文章！