Discussion :

[movlw]

Bonjour à tous,

j'ai un petit soucis, à l'appuie d'un bouton je change dynamiquement l'image background d'une div. Au moment de changer l'image celui ci "clignote" avant d'apparaitre.

je pense que ceci est dû à la taille de l'image (17ko), l'mpechant ainsi de se charger rapidement.

Qu'en pensez vous ?

merci par avance de vos réponses !

[mathieu]

montre nous le code que tu utilises pour charger l'image de fond

[movlw]

par defaut dans le css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
#banner{
	height:130px;
	width:320px;
	margin-left:auto;
	margin-right:auto;
	background: white;
	background-image:url("../images/banner.png");
	background-size:100% 100%
	background-repeat: no-repeat;
	}

action permettant de changer l'image:

Code :

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

document.getElementById('banner').style.backgroundImage="url('images/banner2.png')";

[NoSmoking]

Bonjour,

je pense que ceci est dû à la taille de l'image (17ko), l'mpechant ainsi de se charger rapidement.

- 17 ko n'est pas énorme !

- Il existe une façon simple pour qu'elle se charge rapidement c'est de la pré-charger avant utilisation.

[movlw]

comment je fais ça ?

[NoSmoking]

La manière la plus simple est de créer un objet Image ayant comme src l'url de l'image à afficher...

Code :

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

1
2
var imageFond = new Image();
imageFond.src = 'images/banner2.png';

...de la sorte lorsque l'on en a besoin elle est déjà présente en cache.