PRELOAD OU PRECHARGEMENT D'IMAGES CSS

CODE SOURCE CSS ET HTML

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
</head>

<body>
...........<!-- partie de la page avant le pré-chargement CSS -->
<img src="image_survol1.jpg" style="display:none" alt=""> <!-- pré-chargement invisible de la 1er image de survol -->
<img src="image_survol2.jpg" style="display:none" alt=""> <!-- pré-chargement invisible de la 2ime image de survol -->
<!-- répéter autant de fois qu'il y a d'images de survol -->
...........<!-- partie de la page après le pré-chargement CSS -->

</body>
</html>

COMMENTAIRES

Quand on utilise des pseudo-classes a:hover avec des images (par exemple dans le cas de boutons en roll-over CSS) il ya souvent un inconvénient, particulièrement sensible quand on accède au site avec un ligne téléphonique 56 Kb.

Cet inconvénient est le suivant : la 1er image du roll-over, celle qui se voit avant qu'on ne passe la souri dessus, est chargée normalement en même temps que la page. Mais la deuxième, celle qui apparait lors du survol à la souri, n'est chargée qu'au moment de ce survol.
Résultat (moins sensible avec l'ADSL) : un temps d'attente, pendant lequel l'effet de survol ne marche pas. Il faut laisser la souri sur la zone de survol quelques dixièmes de secondes (parfois même quelques secondes) pour que la deuxième image s'affiche. On note que le problème ne se produit que lors du 1er survol. En effet, l'image ayant été chargée en mémoire s'affiche instantanément lors des survols suivants.

Pour éviter ce problème, on peut faire des images aussi légères que possible, ce qui réduit le temps d'attente (mais ne le supprime pas).

L'autre solution classique, c'est le preload (pré-chargement). Il s'agit d'un programme qui va charger invisiblement en mémoire les images secondaires (celles-qui s'affichent lors du survol). Lors du survol, l'affichage est alors instantané.
En général, ce pré-chargement se fait par un programme JavaScript. Mais on peut aussi le réaliser avec un code CSS.

Cette technique de pré-chargement CSS a 3 avantages sur la technique JavaScript :
- Elle est plus rapide à l'exécution qu'un programme JS.
- Elle est bien plus simple à écrire qu'un programme JS.
- Elle marche sur tous les navigateurs, y compris Netscape 4, alors que certain nombre de navigateurs (estimés par certains comme allant jusqu'à 10%) ont leur JavaScript désactivé.

L'idée est simple : on charge normalement l'image secondaire avec une balise (X)HTML <img...>, mais on en interdit son affichage grace à une propriété CSS display:none. Cet affichage ne se fera que lors du survol à la souri.

Ou placer la commande de pré-chargement ? On peut la mettre :
- Tout en haut de la page, juste après la balise <body>. Mais je n'y suis pas trop favorable. En effet, le chargement de la page va s'arréter tant que la ou les images secondaires ne seront pas chargées. S'il y en a une dizaine ou plus, cela ralentis considérablement le chargement de la page.
- Juste au dessus des boutons CSS. Mais là aussi, on ralenti l'affichage de la 1er image des boutons.
- Je pense donc qu'il faut mettre les lignes de pré-chargement juste en-dessous de la zone ou se trouve les boutons.
Si les boutons sont tout en haut de la page, et qu'on ne veut pas bloquer l'affichage du texte de la page, on peut même renvoyer le pré-chargement en bas de la page, juste avant la balise de fin </body>. Après tout, les gens ne se jettent sans doute pas sur les boutons immédiatement, dès leur affichage. Le pré-chargement peut donc attendre quelques secondes.

Cette idée, je l'ai prise sur l'excellent site Alsacréations.