How to preload your site with style
Example
Here is a live example of what appear while loading my pages.
Hello! I've finished loading!
Click me to see me disapear again.
Loading...
I first tried to integrate queryLoader, but it didn’t fill my needs.
The plugin add a black div to hide all the content. But as the script had to be launched at the end of the source code my website show for a small time.
In order to hide this small artefact, here is how I do that.
Code
In a first time, I added at the top of the body the div hiding all the content.
... <body> <div id="blackpage"> content to display during the loading. </div> ...
and here is the associated CSS to #blackpage
:
#blackpage top: 0 left: 0 width: 100% height: 100% margin-left: 0 margin-right: 0 margin-top: 0 margin-bottom: 0 position: absolute text-align: center color: #666 padding-top: 10em background-color: #eee z-index: 9000
and the associated jQuery code:
$(document).ready(function(){ $('#blackpage').fadeOut(); });
Yes, it is as simple as that. And, putting the #blackpage
div at the top of my page, I ensure to hide anything while loading.
I hope it had helped you!
comments
Created: 10/03/2009
Modified: 06/17/2010