La classe pour charger une page webHow to preload your site with style
ExampleExemple
Here is a live example of what appear while loading my pages. Voici comment apparaissent mes pages pendant leur chargement.
Hello! I've finished loading!Voilà ! Je suis chargée !
Click me to see me disapear again.Cliquez-moi dessus pour recommencer.
I first tried to integrate queryLoader, but it didn't fill my needs. J'ai d'abord essayé d'intégrer queryLoader, mais il ne comblait pas mes besoins.
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. 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.
In order to hide this small artefact, here is how I do that. 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.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> <p>...
and here is the associated CSS to #blackpage:
et le CSS correspondant au div #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: ainsi que le code jQuery associé :
$(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.
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.
J'espère que ça a pu vous être utile ! I hope it had helped you!