How to Display a Running Progress Bar During Page Load Using JavaScript?

Displaying a Running Progress Bar During Page Load

To achieve a running progress bar while your page loads, you can utilize the XMLHttpRequest (XHR) object in JavaScript. The XHR object provides progress events that allow you to monitor the upload and download progress of a request.

Here's an example using jQuery to set up the progress bar:

<code class="javascript">$.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 based on the upload progress
      }
    }, false);
    
    // Download progress
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        // Update the progress bar based on the download progress
      }
    }, false);
    
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data) {
    // Do something success-ish
  }
});</code>

In this script, the xhr function creates a new XMLHttpRequest object and registers event listeners for upload and download progress. These event listeners are responsible for calculating and updating the progress bar based on the percentage of data transferred.

To make this work with your existing code, you'll need to replace your $(window).load function with the above $.ajax call. Ensure that the URL and data parameters are set appropriately for your request.

Remember to style the progress bar using CSS to give it a visual representation. You can customize the width, height, color, and animation to suit your design preferences.

The above is the detailed content of How to Display a Running Progress Bar During Page Load Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!