[Astuce] Précharger des images en CSS

[snooze92]

Salut à tous !

Je me propose ici de vous expliquer une astuce que j'ai découvert il y a peu, en codant cet aperçu de header : http://snooze92.free.fr/headerlado/headerlado.html


Comme vous pouvez le constater, le header est constitué d'une dizaine d'images, et chaque bouton "change" au passage de la souris. Je pense que les intéressés connaissent déjà, mais je vais quand même prendre le temps de vous rappeller comment celà fonctionne au niveau du CSS.


Prenons l'exemple du bouton accueil, à son état normal, il est définit dans le CSS par :

Code: (CSS)

#bouton_accueil
{
float: left;
width: 390px;
height: 31px;
background: url("images/1_accueil.gif");
background-repeat: no-repeat;
}

On a donc l'image 1_accueil.gif qui s'affiche :

Quand on passe la souris dessus, certaines propriétés peuvent être modifiées via le CSS (avec la propriété "hover"). Ici, on change juste l'image :

Code: (CSS)

#bouton_accueil:hover
{
background: url("images/1_accueilx.gif");
}

On a donc l'image 1_accueilx.gif qui s'affiche :


Voilà, le rappel est fini ^^ ... jusque là aucun problème me direz vous ... Bah si, justement. J'ai toujours eu un souci, c'est à dire que les images à afficher au passage de la souris ne se chargent pas en même temps que la page. Au premier passage de la souris, il faut alors attendre que les images se chargent, et c'est pas beau ...

Il y a deux solutions à ce problème, une plutôt connue, et celle que je viens de découvrir ^^


a- La méthode connue

Il s'agit de rajouter au début du "body" sur la page html, des lignes comme celle là :

Code: (xHTML)

<img src="nom_de_limage_a_precharger" style="display:none" alt="">

Il faut ajouter autant de lignes que d'images à précharger.
L'image va alors se charger comme pour s'afficher, mais va rester "invisible" à cause de style="display:none" ...


b- La méthode CSS géniale ^^

Cette fois, l'idée est de n'ajouter que la ligne suivante au début du "body" sur la page html :

Code: (xHTML)

<div id="preloadimages"></div>

Il faut ensuite ajouter le code suivant au CSS :

Code: (CSS)

#preloadimages
{
width: 0px;
height: 0px;
display: inline;
background: url("images/1_accueilx.gif");
background: url("images/2_presentationx.gif");
background: url("images/3_museex.gif");
background: url("images/4_assocx.gif");
background: url("images/5_manifx.gif");
background: url("images/6_histoirex.gif");
background: url("images/7_collectionx.gif");
background: url("images/8_bibliox.gif");
background: url("images/9_ladoinfox.gif");
background: url("images/0_adminx.gif");
}

Ainsi, vous pouvez mettre autant d'images que vous voulez dans la liste, qui seront toutes préchargées en même temps que la page, grâce à <div id="preloadimages"></div> ...

L'intérêt de cette deuxième méthode est de ne pas allourdir le code xHTML qui est souvent assez ouf' comme ça ^^ Il suffit d'une simple ligne, et du CSS qui charge tout. De plus, si votre site comporte plusieurs pages, vous n'aurez qu'à changer UNE FOIS le CSS pour toutes les pages, au lieu de changer le code xHTML de chaque page, en cas de modification ...



A méditer ...

Sn00ze92.




[edit] Que ce soit sur IllusiOn Design ou l'aperçu du header ... ça a pas l'air de fonctionner si bien que ça cette méthode ... Jvais voir ce que je trouve, mais j'ai peur qu'au final la première soit la seule qui fonctionne ^^