Résolu Preload images

[la_lvlouche]

Voila j'ai realisé la page principale de mon site, celle ci est constituée uniquement d'une image map.
Sur celle ci j'ai mis des onMouseOver sur les bouton, mais a chaque bouton il faut attendre un petit moment avant que l'image ne s'affiche.

C'est pourquoi je me demande s'il est possible de precharger les images liées a ses onmouseover, grace a un code javascript (preload il me semble)
Mais je ne sais pas comment faire.
Merci de bien vouloir m'aider

 

[Meshi]

Une solution serait de charger tes images liées aux mouseover dans l'HTML en les appelant simplement [cpp]<img src="xxx" alt="" />[/cpp] puis en les cachant en css à l'aide d'un display: none

l'image sera donc chargée mais ne sera pas vue par l'utilisateur.

Il y a d'autres solutions mais dis moi si celle-ci te convient.

 

[la_lvlouche]

ca fait un preload? Ca c'est pour l'affichage d'une image non?
ou ce display:none fait ce chargement?

 

[Meshi]

Désolé pour le retard de ma réponse,

effectivement le code que je te donne sert à l'affichage de l'image. Le display:none en CSS permet de cacher visuellement l'image qui ne sera pas visible par l'utilisateur. L'astuce est que ton navigateur aura déjà téléchargé l'image mais ne l'affichera pas tant que le display:none sera actif.

Une autre solution plus efficace est l'utilisation de sprites. Je t'invite à consulter ce site http://www.pompage.net/pompe/sprites/ qui explique très bien le principe. Pour résumer il s'agit de réunir dans un même fichier toutes tes images et de les afficher en jouant sur le background-position en CSS. Concrètement ça se traduira par le fait que si ton image map est chargée, alors les images qui servent au mouseover seront donc aussi chargées.

 

[la_lvlouche]

ok merci je regarde ca