IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Chargement dynamique du background


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2014
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2014
    Messages : 89
    Points : 52
    Points
    52
    Par défaut 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 !

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 352
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 352
    Points : 12 965
    Points
    12 965
    Par défaut
    montre nous le code que tu utilises pour charger l'image de fond

  3. #3
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2014
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2014
    Messages : 89
    Points : 52
    Points
    52
    Par défaut
    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')";

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 910
    Points
    38 910
    Par défaut
    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.

  5. #5
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2014
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2014
    Messages : 89
    Points : 52
    Points
    52
    Par défaut
    comment je fais ça ?

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 910
    Points
    38 910
    Par défaut
    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.

  7. #7
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2014
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2014
    Messages : 89
    Points : 52
    Points
    52
    Par défaut
    Jai compris mais pour changer l image dois je toujours utiliser la même méthode ou plutôt

    Image.src

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 910
    Points
    38 910
    Par défaut
    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>

  9. #9
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2014
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2014
    Messages : 89
    Points : 52
    Points
    52
    Par défaut
    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é.

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 910
    Points
    38 910
    Par défaut
    • 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 ?

  11. #11
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2014
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2014
    Messages : 89
    Points : 52
    Points
    52
    Par défaut
    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.

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 910
    Points
    38 910
    Par défaut
    ...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.

  13. #13
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2014
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2014
    Messages : 89
    Points : 52
    Points
    52
    Par défaut
    Merci NoSmoking ta solution marche à la perfection

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [jar]chargement dynamique.
    Par Teddy-htk dans le forum API standards et tierces
    Réponses: 10
    Dernier message: 27/04/2006, 15h19
  2. [tomcat]chargement dynamique de classes depuis une webapp
    Par alphamax dans le forum Tomcat et TomEE
    Réponses: 2
    Dernier message: 12/03/2004, 09h59
  3. Problème mémoire avec une dll par chargement dynamique
    Par widze19 dans le forum C++Builder
    Réponses: 6
    Dernier message: 15/12/2003, 13h20
  4. Dll a chargement dynamique
    Par delire8 dans le forum C++Builder
    Réponses: 7
    Dernier message: 05/06/2003, 22h47
  5. Chargement dynamique de DLL sous Unix
    Par Willou dans le forum Autres éditeurs
    Réponses: 7
    Dernier message: 18/12/2002, 18h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo