I first tried to integrate [queryLoader](http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/), 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.
<div>
<codeclass="html">
...
<body>
<divid="blackpage">
content to display during the loading.
</div>
...
</code>
</div>
and here is the associated CSS to `#blackpage`:
<div>
<codeclass="css">
#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
</code>
</div>
and the associated jQuery code:
<div>
<codeclass="javascript">
$(document).ready(function(){
$('#blackpage').fadeOut();
});
</code>
</div>
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.