How does the GMail "Loading..." banner work?

Question

Hello all,

I am trying to replicate a feature of GMail in my own application.

When changing folders in GMail, the display will stay on screen and a small loading banner will appear on the top of the site.
This is desirable, since it prevents the screen from going all white and disturbing the users workflow on postback.

I have tried to disassemble this using Firebug, and I feel that I'm getting close.
The GMail site consists of a 100% sized Iframe which contains the entire interface. After this frame is a div that contains the loading banner. The div is invisible and is placed behind the Iframe.

What script gets executed that move the banner in front of the Iframe?

Thank you,

Martin Wiboe

Answer 1

GMail is built entirely using AJAX; there are no regular postbacks at all.

It creates a <div> before sending the AJAX request asking for the contents of the folder, then hides the <div> when it receives a reply.

You can easily duplicate it using jQuery.

Answer 2

You can accomplish what you are trying to do with AJAX and a callback handler. On the AJAX post, you will make the loading div visible. On a successful postback, you will hide it.