Display a loading image until the page completes loading

Similar to how GDGT.com has it’s loading.gif while the page completes this method will do something very similar.

Right after the body I include the image inside a div:

<div id="loading-image">
	<img src="<?php bloginfo('template_url'); ?>/images/ajax-loader.gif" alt="Loading..." />
</div>

Of course I’m using wordpress so you might need to include a different path for your ajax-loader.gif.

Here’s the CSS I’m using on my current project:

#loading-image {
	background-color: #333;
	width: 55px;
	height: 55px;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px;
}

Now the most important part. I’m using jQuery to hide that div after the page completes loading.

jQuery(window).load(function() {
	jQuery('#loading-image').hide();
});

I have some more jQuery “magic” working for form submissions but this should get you where you need to get.