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

Question

example: Go to your Facebook wall, scroll the end of the page, Facebook will load more wall posts asynchronously. Or just click on an images in your wall post. The image dialog (with comments and larger image) is loading asynchronously as well. (You can see the GET requests with firebug).

But by looking and the firefox tab, you see the loading indicator, just like when a postback occurs.

I know this can be achieved by using an IFrame and changing its src. Just like what iGoogle does. But I'm not sure if Facebook uses an IFrame to load additional wall posts. Is there another way to achieve this?

Update: by saying "loading indicator" I did not mean an ajax indicator.
As I mentioned the browser indicator (the one at the laft side of a tab showing us if the page is loading) changes to loading like it is a postback.

Answer 1

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).

Answer 2

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

Answer 3

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.