Display *browser* loading indicator (like when a postback occurs) on ajax calls Display *browser* loading indicator (like when a postback occurs) on ajax calls ajax ajax

Display *browser* loading indicator (like when a postback occurs) on ajax calls


Not AFAIK. My guess is they probably set the IFrame src to an ajax method and when loaded, they move the content to a div (or another element).


It can be done with an iframe. In short, you append a hidden iframe:

var $loadingIndicator = $('<iframe src="/loading/" class="visuallyhidden">');$loadingIndicator.appendTo('body');

It has to load a page that stalls, never loads. Possibly on the website's own domain since the browser actually shows waiting for domainname.com in the status bar.

In the file domainname.com/loading/index.php you put:

<?php sleep(100);

And remove the iframe when done:

$loadingIndicator.remove();

It's not ideal considering this is actually an additional request. A few reasons:

  • your server would have long requests that might have a performance impact
  • the browser would use one of the few concurrent connections available, hence possibly slowing down whatever is loading
  • it makes animations stutter in my case (Chrome 27/OSX, requestAnimationFrame).

via Slow-loading technique
via https://stackoverflow.com/a/3145840/288906


I made a jQuery-based library to handle this which should be a viable solution in some situations (same-origin) and successfully trigger busy indicators in some desktop browsers (modern Chrome and Firefox at least, and oddly, also IE8 but probably not IE9, and definitely not Safari or most mobile browsers).

Noisy JSON

Basically, I'm using the iframe approach to triggering "busy" indicators, but without artificially hitting a separate "stalled" page: instead, it just uses a custom $.ajaxTransport for passing through a hidden iframe and then parsing the json response back out. The result is that the browser shows loading indicators that are directly related to the request you're making: no extra http requests. You can basically install just the plugin then decide which ajax requests should be noisy and which shouldn't just by changing the dataType parameter.

As a side note, the fact that loading content in iframes DOESN'T trigger any UI feedback to the user in Safari and IE9 is just bizarre.