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/