Throbber rendering during loading and rendering of html page

Question

I have a page that displays slowly. Drive through the net quickly. Page loading is quick. In fact, you can see (if your machine is slow enough), the initial layout of the html components. Then some javascript stuff is launched, which makes some of these components all ajaxy. Then finally css is applied.

I can do nothing about javascript, which slows down all scanning. So I need a pulsator to make the user linger, the browser is working. Is there any way to block the browser is to do a rendering event? Is there such an event? Is there any other way to do this?

Answer 1

Show the shotgun before running the code and hide it after.

Using jQuery:

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

Answer 2

Check when the DOM is ready before invoking all of your Ajax stuff.

using Prototype :

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

using jQuery :

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

Answer 3

Take a look: http://plugins.jquery.com/project/throbber