Search code examples
htmlrenderingthrobber

Showing a throbber during html page load and rendering

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?

Solution

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

    Using JQuery:

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