2.7 KiB
2.7 KiB
| isHidden | menupriority | kind | created_at | title | multiTitle | multiDescription | tags | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| false | 1 | article | 2009-10-03T14:34:11+02:00 | 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.
...
content to display during the loading.
...
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!