14

I am trying to show a progress bar before navigating from one page to another within the same website.

My function binds an updateProgress function to XMLHttpRequest onprogress event and it redirects user to a new page on (xhr.readyState == 4 && xhr.status == 200) It seems working fine except that Chrome shows "total" as zero which won't let the progress bar function properly. My code is below.

Thank you in advance...

$('.ajaxNavi').click(function (e) {
  e.preventDefault();
  var url = $(this).attr('href');
  var xhr = new XMLHttpRequest();
  xhr.onprogress = updateProgress;
  xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4 && xhr.status == 200)
    // REDIRECT HERE
    }
  });
  xhr.open("GET", url, true);
  xhr.setRequestHeader("Content-Type", "text/html");
  xhr.send();
});

function updateProgress(e) {
  console.log(e.loaded + '    ' + e.total);
}
Edgar Orozco
  • 2,722
  • 29
  • 33
B10
  • 173
  • 1
  • 11
  • Is issue specific to Chrome? – A. Wolff Jan 04 '15 at 16:58
  • I think so ... because mozilla is showing the e.total value correctly. – B10 Jan 04 '15 at 17:00
  • Just checked, IE displays the value too... – B10 Jan 04 '15 at 17:06
  • xhr.upload.onprogress didnt work either. – B10 Jan 04 '15 at 17:12
  • Displays it when? During the last log message, or for every log message? Testing in mozilla/ie that the total was not populated until the request was complete. In IE total was some large number (maybe their max length idk) until the end. Which is probably due to the fact that the Content-Length header is not usually sent with html pages (this may be because of gzip compression etc) – Patrick Evans Jan 04 '15 at 17:12
  • with mozilla if a bigger file is used, it does display the value during the progress. – B10 Jan 04 '15 at 17:14
  • 1
    But is it a bigger html page? Check the network tab in the developers tools, check the request to see if it is sending a content-length header – Patrick Evans Jan 04 '15 at 17:15
  • 2
    The request header does not have the content-length... The response headers: Content-Length:5410 Content-Type:text/html; charset=utf-8 – B10 Jan 04 '15 at 17:23
  • 2
    you need to check if it's computable (e.lengthComputable) before using the properties to determine progress. – dandavis Jan 04 '15 at 17:48
  • 3
    that's the part I don't understand. It is e.lengthComputable 'true ' for mozilla, but not for chrome... If another txt based file is specified as url instead of an html, it is 'true' for Chrome as well. For example, I tried with '/Site.master' and was computable. When I change it to html, it is not... – B10 Jan 04 '15 at 17:54

1 Answers1

9

Two years late, but this question seems to have a lot of views and should probably be answered.

According to this question a gzipped response will always have lengthComputable set to false in Chrome. This makes a lot of sense because you may know how much more compressed data is coming down the pipe, but you can't have any idea how much that compressed data will expand to.

This solution seems like a good one to me.

JosiahDaniels
  • 2,411
  • 20
  • 37