Charger des images à l'avance

Version imprimable

10/10/2012, 19h29
aku84

Charger des images à l'avance
Bonjour,

j'ai fais une image qui change quand on passe la souris au dessus, ça change grace au CSS:
Code:

1 2 #m1 {background:url(./images/A.png) no-repeat;} #m1:hover {background:url(./images/B.png) no-repeat;}
Le problème c'est que les images qui sont censées apparaitre en mouseover ne sont pas chargées au premier passage, donc il n'apparait rien.

Est-ce qu'il est possible de les charger à l'avance pour les afficher normalement dès le premier passage de la souris ?

Merci
10/10/2012, 21h15
andry.aime

Bonsoir,

Fait une recherche sur le forum javascript pour précharger les images. Tu trouveras des discussions résolues.

A+.

Et en css, ce n'est pas possible ? (Même si ça m'a l'air moins propre) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Preload image en css</title>
	<style type="text/css">
.preload {display: none;}
#m1 {width: 800px; height: 400px; background: url(./images/A.png) no-repeat;}
#m1:hover {background: url(./images/B.png) no-repeat;}
        </style>
</head>
<body>
	<img class="preload" src="./images/B.png" />
            <!-- ou dans une div.preload si plusieurs images -->
	<div id="m1"></div>
</body>
</html>

11/10/2012, 14h37
Rafapouf
Si ! c'est possible

Il faut que tu fasses une seule image avec les deux.
Ensuite tu affiches qu'une partie de ton image et au survol avec la pseudo classe hover tu deplaces ton background pour n'afficher que la deuxieme partie de l'image.
Dans mon exemple, la taille total de mon image est de 60px de haut et 74 de large

Ex :
Code:

1 2 3 4 5 6 7 8 9 #m1{ display: block; height: 30px; width: 74px; background: url('img/menu/accueil.gif') no-repeat 0 0; } #m1:hover { background-position : 0 -30px; }
Avec cette méthode, une seule image est chargée à la base et pas de soucis ;)
11/10/2012, 14h47
Muchos

Oui, bonne idée ! Ça fonctionnerait aussi bien avec la technique des sprites css ?
11/10/2012, 14h52
Rafapouf

J'ai jamais utilisé les sprites, mais il me semble que c'est le même genre non ?
Charger une grosse image en rendant visible qu'une partie et la déplacer pour afficher ce que l'on veut

Edit : en fait oui c'est exactement ça !
Je l'utilise sans connaitre le nom :oops:

Edit 2 : http://cssglobe.developpez.com/tutor...gement-images/
Une ressource sur les sprites sur developpez.com ;)