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.

Code

November 03

css jquery tuts wordpress

http://twitter.com/jaredbangs Jared Bangs

Not to sound like a broken record, but if javascript is disabled then the image will show but never be hidden, in this case.

How about (inside the first div) adding some inline javascript that writes the image tag you are putting in there (using document.write since the DOM may not be ready yet at that point in the page load)?

That way the loading image will only show up when JS is enabled, and then of course you will be able to hide it as you've done here.
http://dancameron.org dancameron

Yeah, I went the route of show on ready then hiding again after load.
Julious

IE as always has a problem with this.
stacks for a while before hiding the image
siva prasad

can u post the total code format
Hosseind600

great
Eduardo

hello friend, I need your help. I’m brasilian, i don’t speak english.
For example, a page with several images. I need a icon load for each image while loading.
Can you help me?
Vistronic

thanks this helped I inserted in custom wordpress page that runs a script so its slow
(:
Sonu

i want to display page loading image till the complete loading of page in word press
Jodue

Not working properly
http://www.mikesel.info/ Mike Hudson

Works perfectly, thanks!

Maybe also worth adding for those of you who do not want to use this with a word press implementation, you will need to upload jQuery to your site, and reference in it your code:

Then encase your jQuery script above in tags

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

Pingback: http://dreamcustompaint.co.uk/gallery.php

http://www.mikesel.info/ Mike Hudson

Urgh – Disqus has stripped the formatting from the code :(

Ashish Jindal

Nice work, Thanks
Johncena C88

Not Working Properly. Loading completed image don’t hide

Display a loading image until the page completes loading

About the Author, Dan Cameron: