Forcer le chargement d'une image [resolu]

Salut,

Un roll-over type truc:hover { image.. } implique un appel serveur donnant lieu a un petit delai. Outre la methode des sprites, je sais qu'on peut forcer le chargement d'une image en Javascript, comme ca pas d'appel serveur quand on passe la souris sur l'element !

Mais comment faire ?

salut

balise img + css display none fait la même chose.

Ok mais j'aurai dans mon code un <img> qui correspond a rien semantiquement non?

Bonjour,

Jette un coup d'oeil ici: http://www.batraciens.net/css-astuces/pre-chargement-images-css.htm

Cordialement

Bonjour,

Personnellement, je préfère précharger les images via Javascript avec la bonne vieille technique du

var monImage = new Image();
monImage.src = 'chemin-de-limage-a-precharger';

En utilisant un array, c'est encore mieux.

Le désavantage de précharger les images avec <img> et une couche de CSS, est que les images à précharger apparaissent lorsque les CSS sont désactivés, ce qui peut être parfois très disgracieux.
Modifié par Tony Monast (13 Mar 2011 - 15:54)

+1 pour la solution de Tony.
Par contre, je pense qu'il vaut mieux placer le code JavaScript en fin de page (avant </body>, et après les scripts plus essentiels au fonctionnement de la page s'il y en a), pour ne pas retarder le chargement d'autres éléments de la page.

Eh bien merci !
Modifié par apericube (13 Mar 2011 - 23:50)

salut

Je suis curieux de savoir quel solution tu as retenue.

Celle de Tony mais je m'apercois que ca semble pas trop marcher vu que j'ai toujours un delai ! Ou alors j'ai mal fait un truc.

Dans mon script JS j'ai :

var monImage = new Image(); 
monImage.src = 'images/footer_bg_menu.jpg'; 

Mais le delai de chargement au passage de la souris est toujours la..

Bonjour,

As-tu une page en ligne? Peut-être que le chemin de l'image est invalide.

Tu peux jeter un oeil dans Firefox avec l'extension HTTPFox. Tu verras si l'image est bien appelée via Javascript.

Bon en fait c'etait pas le bon chemin. J'ai cru que comme mon JS est au meme endroit que mon CSS, je pouvait mettre le meme chemin ("images/") pour acceder aux meme fichiers image mais il n'en est rien !

J'ai donc mis un chemin absolu et la ca roule, merci encore.

Petite question parallelle : quelle est la raison de cette difference entre le chemin dans le CSS et le chemin dans le JS ?

Bonjour,

Simplement parce que les fichiers ne se situent pas au même niveau, je suppose (car je ne connais pas la structure de tes fichiers ou dossiers).
Si, par exemple, une image de fond se trouve dans le dossier "images" et que la feuille de style appelant cette image se trouve dans le dossier "css" situé au même niveau, il faudra appeler cette image via "../images/une_image.jpg", alors que si le fichier .js se trouve au même niveau que le dossier "images", il suffira de faire "images/une_image.jpg".

Cordialement
Modifié par lddsoft (20 Mar 2011 - 15:41)

apericube a écrit :
J'ai cru que comme mon JS est au meme endroit que mon CSS, je pouvait mettre le meme chemin ("images/") pour acceder aux meme fichiers image mais il n'en est rien !

En effet:
- Les chemins relatifs dans une feuille de styles s'appliquent à partir de l'emplacement de la feuille de styles.
- Les chemins relatifs dans un script JS s'appliquent à partir de l'emplacement de la page HTML qui appelle ce script.
Modifié par fvsch (21 Mar 2011 - 23:48)

Woké merci