show progressbar while loading pages using jquery ajax in single page website

by

Allow me to refer you to this page , it desribes how you can add a progress event listener to the xhr object (which only works in these browsers, in older browsers you simply have rely on the same base you’re currently using) in jquery.

For reference I have copied the relevant code below (you would only be interested in the ‘Download progress’ part probably):

$.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;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "https://stackoverflow.com/",
  data: {},
  success: function(data){
    //Do something success-ish
  }
});

Do allow me to say though that this is a lot of overkill for a single page website and only really becomes useful for large files. Additionally images and similar media aren’t handled in this way and you would need to monitor the loading of images (or do it yourself through ajax) to make such a system perfect.

Here is a JSFiddle showing this in action: http://jsfiddle.net/vg389mnv/1/

More Related Contents:

  1. How to inject javascript code that uses php variables into php page
  2. How to get the jQuery $.ajax error response text?
  3. Passing JavaScript array to PHP through jQuery $.ajax
  4. Send array with Ajax to PHP script
  5. Creating jQuery AJAX requests to a PHP function
  6. Change DIV content using ajax, php and jQuery
  7. jQuery AJAX form using mail() PHP script sends email, but POST data from HTML form is undefined
  8. How to load PHP file into DIV by jQuery?
  9. Passing Javascript Variable to PHP using Ajax
  10. Jquery – Uncaught TypeError: Cannot use ‘in’ operator to search for ‘324’ in
  11. Pass data from jQuery to PHP for an ajax post
  12. How to pass an array using PHP & Ajax to Javascript?
  13. Jquery: Running AJAX locally without a webserver
  14. PHP Ajax Upload Progress Bar
  15. How can I pass variables from JavaScript to PHP?
  16. How to rotate image and save the image
  17. Cross Domain Ajax Request with JQuery/PHP
  18. How to implement a chat room using Jquery/PHP?
  19. the facebooks 'xyz is typing' feature? [closed]
  20. AJAX request callback using jQuery
  21. using jquery $.ajax to call a PHP function
  22. PHP/Apache/AJAX – POST limit?
  23. pdf file upload ajax html
  24. How to access PHP session variables from jQuery function in a .js file?
  25. Populating a select box using JQUERY, AJAX and PHP
  26. Jquery ajax setTimeout after form succes not redirecting?
  27. Send form data using ajax
  28. Codeigniter CSRF valid for only one time ajax request
  29. SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
  30. How to send the values of an array of checkboxes through Ajax using jQuery?

Leave a Comment