Sommaire

Le but...

Compte tenu du poids des images, du contenu dynamique à parser toujours croissant, il peut arriver que votre page ne soit pas très esthétique durant son chargement.
Afin de rendre ce chargement un peu plus agréable à l'utilisateur, nous allons voir ici comment développer un petit preloader grâce à JavaScript et la manipulation de propriétés CSS.

Le principe

Il est tout simple (le principe), nous allons diviser notre page en deux parties, l'une contenant tout le contenu de notre site, l'autre ce qui sera presenté au visiteur durant le chargement du dit-contenu.

Le HTML

<body>
<div id="wait">
<!--on place ici notre loader, l'image vue plus haut par exemple-->
</div>
<div id="content">
<!--on place ici tout le contenu du site-->
</div>
</body>

Voilà, rien de compliqué donc, on passe au JavaScript qui va nous permettre d'obtenir l'effet voulu.

Le JavaScript

On va placer deux petits scripts, le premier entre les balises <head> de notre page, le second à la fin du document, juste avant la balise </body> de celui-ci.

Dans le head
Le code
<script type="text/javascript" language="javascript">
<!--
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name)
{
if (document.getElementById)
{
return document.getElementById(name).style;
}
else if (document.all)
{
return document.all[name].style;
}
else if (document.layers)
{
return document.layers[name];
}
}

function ap_showWaitMessage(div, flag)
{
if (!DHTML) return;
var x = ap_getObj(div);
x.display = (flag) ? 'block':'none'
return true;
}

ap_showWaitMessage('wait', 1);
//-->
</script>
l'explication

Allons y pour l'explication de ce petit bout de code :

La variable DHTML et la fonction ap_getObj nous permet de selectioner par l'id du div ses CSS quelque soit l'arbre de DOM de notre navigateur.

La fonction ap_showWaitMessage(div, flag) va en fonction du "flag" fixé le display du div à block ou à none. En d'autres termes, on donne l'identifiant du div voulu à la fonction et par l'opérateur conditionnel ? (que l'on a déjà vu dans Le styleswitcher Javascript) si le flag est à 1 on affiche le div, s'il est à 0 on le masque.

Pour finir, on affiche par défaut le div 'wait'

A la fin de la page
Le code
<script type="text/javascript" language="javascript">
<!--
ap_showWaitMessage('wait', 0);
ap_showWaitMessage('content', 1);
//-->
</script>
L'explication

En fin de page, donc lorsque toute notre page est chargée (c'est là qu'est l'astuce ;-)), on cache le div d'attente et on affiche le div content

Pour finir

Deux petites remarques pour finir, il est à noter que le display de votre div content doit être fixé à none par défaut, et celui de wait à block

La seconde remarque concerne l'accessibilité, en effet si votre visiteur a désactivé l'usage de JavaScript dans son navigateur, il n'aura pas accès à votre site !
Il est donc nécessaire d'insérer un lien vers votre page dépourvue de tout effet javascriptien dans votre preloader

Voilà pour notre preloader, remarques, critiques et autres c'est dans les comm' :)