在頁面載入期間顯示運行進度條
要在頁面載入時顯示運行進度條，與顯示運行進度條不同的方法需要靜態載入圖像。這可以透過利用 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中文網其他相關文章！
