Chargement dynamique du background

Version imprimable

27/07/2015, 14h09
movlw

Chargement dynamique du background

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 !
27/07/2015, 15h50
mathieu

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

par defaut dans le css:
Code:

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:

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

27/07/2015, 18h53
NoSmoking

Bonjour,

Citation:

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.
27/07/2015, 19h01
movlw

comment je fais ça ?
27/07/2015, 19h34
NoSmoking
La manière la plus simple est de créer un objet Image ayant comme src l'url de l'image à afficher...
Code:

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.
27/07/2015, 19h54
movlw

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

Image.src

Citation:

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:

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:

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>

28/07/2015, 08h30
movlw

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é.
28/07/2015, 19h04
NoSmoking

• 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 ?
29/07/2015, 11h36
movlw

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.

Citation:

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

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:

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.

30/07/2015, 10h17
movlw

Merci NoSmoking ta solution marche à la perfection :resolu: