WordPress:Display a loading image until the page completes loading

To get the ajax loader image until the page loads ,
First add the following code somewhere in header.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<div id="loading-image">
	<img src="<?php bloginfo('template_url'); ?>/images/ajax-loader.gif" alt="Loading..." />
</div>

Then , add the css for the styling purpose

#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 finally add the jquery part in the footer,

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

This can be used for magento site too , just need to change the portion that we include in header
Just add the line below in header.phtml

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<div id="loading-image">
	<img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif', array('_secure'=>true)) ?>" alt="Loading..." />
</div>

Source : http://dancameron.org/code/display-a-loading-image-until-the-page-completes-loading/