Charger des images à l'avance

**aku84** · 10/10/2012, 19h29

Bonjour,

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**andry.aime** · 10/10/2012, 21h15

Bonsoir,

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

A+.

**Muchos** · 11/10/2012, 00h24

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Rafapouf** · 11/10/2012, 14h37

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Muchos** · 11/10/2012, 14h47

Oui, bonne idée ! Ça fonctionnerait aussi bien avec la technique des sprites css ?

**Rafapouf** · 11/10/2012, 14h52

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

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

Charger des images à l'avance

HTML

Vue hybride

Discussions similaires

Partager

Partager