How can I display a running progress bar during page load using XMLHttpRequest events?

Displaying a Running Progress Bar During Page Load

To show a running progress bar while a page is loading, a different approach from displaying a static loading image is required. This can be achieved by utilizing the progress events provided by the XMLHttpRequest (XHR) object.

In the JavaScript code provided in the question, the window.load() event listener is used to hide the loading image once the page has finished loading. To implement a progress bar, we can utilize the progress events of the XHR object instead.

The following code snippet demonstrates how to use XHR progress events to display a running progress bar:

<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>

This code sets up an XHR request with progress event listeners for both upload and download progress. When the progress of either the upload or download changes, the event listener will be triggered and you can update your progress bar accordingly.

The console.log() statements in the code are for demonstration purposes. You can replace them with your own code that updates the progress bar's appearance based on the percentComplete value.

The above is the detailed content of How can I display a running progress bar during page load using XMLHttpRequest events?. For more information, please follow other related articles on the PHP Chinese website!