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 {
    display:block;
    background-color: #000;
    height:100%;
    width:100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999;
    -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.
<script type="text/javascript">
jQuery(window).load(function(){
    jQuery('#loading-image').fadeOut(1000);
});
</script>