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.
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.
Yeah, I went the route of show on ready then hiding again after load.
IE as always has a problem with this.
stacks for a while before hiding the image
can u post the total code format
great
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?
thanks this helped I inserted in custom wordpress page that runs a script so its slow
(:
i want to display page loading image till the complete loading of page in word press
Not working properly
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
Urgh – Disqus has stripped the formatting from the code :(
Nice work, Thanks
Not Working Properly. Loading completed image don’t hide
It worked like a charm, even in IE. Thanks a lot.
alternative:
$(window).load(function() {
$(‘#loading-image’).fadeOut(300, function() {
});
});
Just use my Sample of Simple Solution(SSS)
JS:
window.onload = function()
{
document.getElementById(“loading”).style.display = “none”;
}
HTML:
CSS:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.8;
background-color: #000;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 40%;
left: 45%;
z-index: 100;
}
It’s a cross browser code and I hope you will find it helpful.