Chargement dynamique du background

**movlw** · 27/07/2015, 14h09

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** · 27/07/2015, 15h50

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

**movlw** · 27/07/2015, 16h13

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** · 27/07/2015, 18h53

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** · 27/07/2015, 19h01

comment je fais ça ?

**NoSmoking** · 27/07/2015, 19h34

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.

**movlw** · 27/07/2015, 19h54

Jai compris mais pour changer l image dois je toujours utiliser la même méthode ou plutôt

Image.src

**NoSmoking** · 27/07/2015, 20h05

dois je toujours utiliser la même méthode

il y a d'autre alternative, notamment le changement de class de l'élément, mais cela reste valable.
On pourrait faire

Code :

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

1
2
3
4
5
6
var imageFond = new Image();
imageFond.src = 'http://cyberzoide.developpez.com/misc/background03-1024x768.jpg';//
 
function changeFond(){
  document.getElementById('fond').className = 'autre_fond';
}

voici un petit exemple mettant en oeuvre cette façon de faire

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Changement d'image de fond</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
  width:100%;
  height:100%;
}
#fond{
  width:1024px;
  height:768px;
  margin:auto;
  background-image:url(http://cyberzoide.developpez.com/misc/background40-1024x768.jpg);
  background-repeat: no-repeat;
  background-position:center;
}
#fond.autre_fond{
  background-image:url(http://cyberzoide.developpez.com/misc/background03-1024x768.jpg);
}
</style>
<script>
var imageFond = new Image();
imageFond.src = 'http://cyberzoide.developpez.com/misc/background03-1024x768.jpg';//
 
function changeFond(){
  document.getElementById('fond').className = 'autre_fond';
}
</script>
</head>
<body>
<button onclick="changeFond()">changeFond()</button>
<div id="fond"></div>
</body>
</html>

**movlw** · 28/07/2015, 08h30

je viens d'essayer la méthode avec les classes...rien à faire au moment de changer l'image il y'a toujours l'effet de "clignotement". Ceci arrive seulement la premiere fois que l'image est chargé.

**NoSmoking** · 28/07/2015, 19h04

• Qu'est ce que tu appels "clignotement" ?
• Constates tu cet effet sur l'exemple que je t'ai fournis ?
• As tu un exemple à nous montrer ?

**movlw** · 29/07/2015, 11h36

je vais essayer d'etre plus precis:

Contexte:
lors du lancement de l'application web, l'utilisateur est sur la page d'acceuil, il peut s'il le désire selectionner un boutton radio parmi trois.
une fonction permet de changer l'image de la banniere lorsque la selection à changé.

Description du problème:
Lors du chargement de la page, l'image par défaut de la banniere se charge correctement sans problème.
Lorsque l'utilisateur switch de radio boutton l'image de la banniere change, mais la transition se fait en "clignotement":
-appui radio boutton
-PAS d'image fond blanc
-nouvelle image
Ceci arrive lors du premier chargement de l'image.

**NoSmoking** · 29/07/2015, 14h49

...il peut s'il le désire selectionner un boutton radio parmi trois.
une fonction permet de changer l'image de la banniere lorsque la selection à changé.

en gros tu as un diaporama "statique" en haut de page, dans ce cas peut être pas nécessaire de jouer avec le background-image mais simplement jouer sur le changement de la src d'une <img>.

Pour éviter l'effet de "clignotement" il suffit d'attendre que l'image soit chargée et pour ce faire on utilise l'événement onload de celle-ci.
Quand elle est chargée on modifie la src de l'image.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function changeImage( nom_image){
  var url = nom_image,
      image = new Image();
  // lorsque l'image est chargée
  image.onload = function(){
    // modification de la src de l'mage
    var oImg = document.getElementById('img_banniere');
    oImg.src = url;
  };
  // affectation de l'url
  image.src = url;
}

Exemple complet :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE HTML>
<html>
<head>
<base href="http://nosmoking.developpez.com/tutoriels/css/galerie-css3-sans-javascript/fichiers/images/">
<meta charset="UTF-8">
<title>Changement Image simple</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
#main{
  width:60em;
  margin:0 auto;
}
h1{
  color: #006699;
}
#banniere{
  text-align:center;
}
  #banniere img{
    width:600px;
    height:450px;
  }
  #banniere input{
    cursor:pointer;
  }
</style>
</head>
<body>
<div id="main">
  <h1>Changement Image simple</h1>
  <div id="banniere">
    <img id="img_banniere" src="image_001.jpg" alt="">
    <p>
      <input type="radio" name="diapo" value="image_001.jpg">
      <input type="radio" name="diapo" value="image_003.jpg">
      <input type="radio" name="diapo" value="image_005.jpg">
    </p>
  </div>
</div>
<script>
function changeImage( nom_image){
  var url = nom_image,
      image = new Image();
  // lorsque l'image est chargée
  image.onload = function(){
    // modification de la src de l'mage
    var oImg = document.getElementById('img_banniere');
    oImg.src = url;
  };
  // affectation de l'url
  image.src = url;
}
// affecte l'action sur l'événement des radio
var oRadio = document.getElementsByName('diapo'),
    i, nb = oRadio.length;
for( i=0; i <nb; i++){
  oRadio[i].onclick = function(){
    changeImage( this.value);
  };
}
// active le 1st
oRadio[0].click();
</script>
</body>
</html>

Nota : tu peux jouer également sur le background-image mais si ton image est porteuse d'information, ce qui semble être le cas puisque qu'en bannière, autant mettre l'image dans la page.

**movlw** · 30/07/2015, 10h17

Merci NoSmoking ta solution marche à la perfection

Chargement dynamique du background

JavaScript

Discussions similaires

Partager

Partager