Optimiser le changement d'images au survol

eagle

On est d’accord, la demi-seconde nécessaire parfois au chargement de l’image alternative au survol du curseur de la souris, c’est pas terrible. Il existe des solutions pour parer à ce problème, explications…

Le Fred Pierrafeu : preload javascript

Il y a effectivement la solution javascript. Cela implique du temps de réponse, du script à éxécuter et la nécessité que le poste client aie activé son javascript. Le principe c’est juste de créer un nouvel objet de type « image » et de lui donner comme source l’image qui nous intéresse :

<SCRIPT language="JavaScript">
var largeur = 100; var hauteur = 50;
monimage = new Image(largeur,hauteur);
monimage .src="http://monsite.com/image.jpg";
</SCRIPT>

Rien de bien compliqué. Mais on peut imaginer une autre solutions qui ne nécessite pas de javascript, mais plutôt un peu de bricolage.

Le Mac Gyver : déplacement hors champ

Quoi? Comment? Simplement : On charge les images à l’aide d’une classique balise <img> dans un div que l’on nommera « preload » par exemple. Ce div, on lui donne une position absolue et un margin-top de -5000. Résultat : Des images chargées dans le cache du navigateur mais invisibles pour l’internaute :
HTML :

<div id="preload">
<img src="monimage.jpg" alt="monimage" />
</div>

CSS :

#preload{
position: absolute;
margin: -5000px 0 0 0;
}

Bon, l’inconvénient outre l’absence d’élégance, c’est le fait qu’au chargement de la page il y aura un temps de latence, mais aussi et surtout que plus le nombre de fichiers à charger est long, plus le temps de chargement sera long. C’est un peu comme transférer sur son ordinateur 500Mo de fichiers texte, ça prendra toujours beaucoup plus de temps qu’un fichier .zip de 500Mo. Ce qui nous amène à la solution que je préfère :

Le Daniel Ocean : Une seule et unique image, le survol déplace la position du background

L’idée reste relativement simple : On agrège toutes nos images (mouseOver et mouseOut) dans une seule et même image (EDIT : Cette technique s’appelle RollOver, ou Sprites). Cette image su charge donc une fois, et chaque bouton de notre menu possède la même image de background mais avec un positionnement css différent. Je m’explique…
Prenons le menu de la page d’accueil de kicoe.net par exemple. Ok, je l’ai couplé avec l’astuce décrite dans le billet « Un menu tout smooth et fondu avec JQuery » pour avoir un afficgae au survol un peu plus smooth. Mais le principe reste le même. Faisons un zoom sur deux boutons seulement pour simplifier l’explication, et l’image « menu.png », de dimension x=312 et y=108, chaque bouton faisant 156×54 :
menu
En haut le mouseOut, en bas le mouseOver. Coté HTML, considérons que nous avons juste ceci :

<ul id="menus">
<li id="leblog"></li>
<li id="graphisme"></li>
</ul>

L’idée et de faire ceci :
schema
Ce qui signifie que

  • le li#leblog aura comme background « menu.png » avec une position x=0, y=0
  • au survol, li#leblog:hover aura comme brackground « menu.png » avec une position x=0, y=-54
  • le li#graphisme aura comme background « menu.png » avec une position x=-156, y=0
  • au survol, li#graphisme:hover aura comme brackground « menu.png » avec une position x=-156, y=-54

Au final, nous avons un menu dynamique qui se charge rapidement et sans être saccadé pour un sou. Merci d’avoir lu cet article, et n’hésitez pas à faire part d vos remarques 🙂

2 réflexions au sujet de “Optimiser le changement d'images au survol”

  1. J’hallucine…Oo
    Il y a un an de ça je devais convaincre môsieur d’utiliser cette technique dans un site que nous avons propulsé.
    Môsieur me snobais, selon lui c’etait useless … Et maintenant, comme une fleur môsieur fait un tuto la dessus -_-
    Pour ta gouverne cela s’appelle du rollover (ou sprites).
    Mets à jour le dans le tuto c’est toujours mieux pour la recherche sur le net :p
    Bisous bécot môsieur,
    Elfeff.
    PS : Tu vois j’y viens sur ton jouliiiii blog ^^

  2. Genre je t’ai snobbé… Je t’ai écouté ouais! Et puis y’a que les c… qui ne changent pas d’avis 🙂
    Je vais mettre à jour les métas du billet, merci.

Répondre à Bruno Annuler la réponse

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire le pourriel. En savoir plus sur comment les données de vos commentaires sont utilisées.