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