J'ai d'abord essayé d'intégrer [queryLoader](http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/), mais il ne comblait pas mes besoins.
Ce plugin ajoutait un 'div' noir pour cacher le contenu du site. Cependant, comme le script doit être lancé à la fin du code source. Pendant un petit moment, on peut voir mon site en train de se mettre à jour.
Pour cacher ce petit 'artefact', voici comment je m'y suis pris.
## Code
D'abort il faut ajouter tout en haut du body cette fois un div qui va être le voile noir qui va tout cacher.
<div>
<codeclass="html">
...
<body>
<divid="blackpage">
content to display during the loading.
</div>
...
</code>
</div>
et le CSS correspondant au div `#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>
ainsi que le code jQuery associé :
<div>
<codeclass="javascript">
$(document).ready(function(){
$('#blackpage').fadeOut();
});
</code>
</div>
Oui, c'est aussi simple que ça. Maintenant ajouter le `#blackpage` tout en haut de ma page me permet d'être certain de tout cacher pendant le chargement de la page.