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?

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/

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

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

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');