Search code examples
javascriptajaxgoogle-chromecometlong-polling

Chrome's loading indicator keeps spinning during XMLHttpRequest

I'm writing an AJAX web app that uses Comet/Long Polling to keep the web page up to date, and I noticed in Chrome, it treats the page as if it's always loading (icon for the tab keeps spinning).

I thought this was normal for Google Chrome + Ajax because even Google Wave had this behaviour.

Well today I noticed that Google Wave no longer keeps the loading icon spinning, anyone know how they fixed this?

Here's my ajax call code

var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
   xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('GET', myURL, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange = function() {
   if (xmlHttpReq.readyState == 4) {
      updatePage(xmlHttpReq.responseText);
   }
}
xmlHttpReq.send(null);
Solution

  • I shamelessly stole Oleg's test case and adjusted it a bit to simulate long-polling.

    load.html:

    <!DOCTYPE html>
<head>
  <title>Demonstration of the jQery.load problem</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  jQuery(document).ready(function() {
    $('#main').load("test.php");
  });
  </script>
</head>
<body>
  <div id='main'></div>
</body>
</html>

    test.php:

    <?php
  sleep(5);
?>
<b>OK!</b>

    The result is interesting: in Firefox and Opera, no loading indicator is shown during XMLHTTPRequests. Chrome lets it spinning... I suspect Google Wave doesn't use long polling anymore (but, for instance, polls every X seconds, to save resources), but I can't test it, as I don't have an account.

    EDIT: And I figured it out: after adding a little delay in loading test.php, which can be as small as possible, the loading indicator stops after load.html has been loaded:

    jQuery(document).ready(function() {
  setTimeout(function () {
    $('#main').load("test.php");
  }, 0);
});

    Somehow, as is confirmed in a comment on another answer, when the browser gets control back to finish page rendering, the indicator stops spinning. Another advantage is that the request cannot be aborted by pressing Esc.