Stop the browser "throbber of doom" while loading comet/server push iframe

Question

When using Comet, or Ajax Long Pull techniques - an iframe is usually used. And while that iframe is waiting for the long connection to close, the browser is spinning its throbber (the progress/loading indicator).

Some websites, for example etherpad.com, managed to make it stop.

How do they do it?

Sabrinasabsay

there are many loading bars, which one are you referring to, is it browser specific, or part of the os? – Meantime

I want to DISABLE the loading bar, the one that you see in your browser (usually top-right corner or in the address bar). – Pronuba

Answer 1

After digging for a day and a night in the guts of the internets, here is what I came up with:

1. server-sent events - Very cool, currently works only in Opera, but may be part of HTML5 and other browsers may support it sometime. Adds a new element tag with content-type of "application/x-dom-event-stream" which allows the Server to fire events in the Client DOM. And it should not show a progress indicator, as far as I understand. It's also a working draft of a standard, and not a hack like the whole iframe comet thing.

2. XMLHttpRequest - in Firefox and Safari, but not in IE, it can be used for long-pull page loading that enables to handle fragments as they appear on each readyStateChange event. Will not show progress indicator*. -- see comment below

3. ActiveXObject("htmlfile") - can be used in IE to create a page/window that is outside of the current window scope. This makes the progress indicator go away! The loaded iframe will be in an invisible browser.

More about server-sent-events:

• http://my.opera.com/WebApplications/blog/show.dml/438711

And more about the other two techniques (also explains the problem better): * http://meteorserver.org/browser-techniques/

Even more in-depth about each technique, and more techniques:

• http://cometdaily.com/2007/12/11/the-future-of-comet-part-1-comet-today/
• http://cometdaily.com/2008/01/10/the-future-of-comet-part-2-html-5’s-server-sent-events/

Sabrinasabsay

When using method (2), XHR, it needs to be invoked AFTER the page finished loading. For example using setTimeout(). If it starts before the page finished spinning the throbber, then it will continue spinning it while loading the XHR - and an "ESC" can abort it, so its bad. – Pronuba

Thanks for that comment Evgeny. I have been banging my head against my page for weeks now. Adding a few second timeout before polling fixed my page throbber issue. – Corduroy

@Sabrinasabsay Unfortunately the timeout solution doesn't work in Chrome, it still gives me a loading indicator (Works in Firefox, though). Any hints? – Laraelaraine

Answer 2

For me, running a setTimeout on the ajax request solved everything. When I ran the request from document.ready, I got the "throbber of doom". But with setTimeout it doesn't happen. (This fix also works for Chrome).

Cerys

Answer 3

Just in case that you may need some examples, this guy did give a solution to solve firefox problem. http://www.shanison.com/?p=237

Overthrow

Answer 4

I had the same problem, and the solution was to use Ajax instead of hidden iframe. So instead of generating iframe somewhere in the page:

$("#chat .msg_list").prepend('<iframe id="hidden" src="chatFrame?id=$userId" frameborder="0" height="0" width="100%"></iframe>');

I used jquery ajax call to load iframe contents into some div:

$('#chat #chat_comet').load('chatFrame?id=$userId');

Memento

Yes, but it was not so obvious to me at first time so I wrote a simpler answer. – Issus