Showing a throbber during html page load and rendering

Question

I have a page that renders slowly. The trip across the net is quick. The initial load of the page is quick. You can actually see (if your machine is slow enough), the initial layout of the html components. Then some javascript stuff runs, making some of those components all ajaxy. Then finally the css gets applied.

I can't do anything about the javascript that's slowing everything to a crawl. So I need a throbber to tell the user to hold up, the browser is working. Is there any way to trap the browser is done rendering event? Is there even such an event? Is there another way to do this?

Answer 1

Check to see when the DOM is ready before calling all your Ajax stuff.

using Prototype:

document.observe("dom:loaded", function() {
  //your code
});

using jQuery:

$(document).ready(function() {
      //your code
});

Answer 2

Show the throbber before the code is run and hide it after.

Using JQuery:

$("#throbber").show();
/* Your AJAX calls */
$("#throbber").hide();