Display a loading image until the page completes loading

November 3, 2009

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.