Probleme affichage de mon script sur internet explorer [Résolu]

Messages postés
2
Date d'inscription
jeudi 2 juin 2016
Dernière intervention
3 juin 2016
- - Dernière réponse : cgandco
Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Dernière intervention
22 juin 2017
- 4 juin 2016 à 13:01
Bonjour

J'ai un probleme d'affichage sur internet explorer pour mon script d'images que je fais défiler pour avoir comme une animation vidéo
Sur ce navigateur les images sautent constamment et je ne sais pas d'ou vient le soucis

Voici mon code

merci par avance
(function(){


/*
Animation des images
_this.image.style.width = "100%"; -> images en responsive
  • /<!-- saved from url=(0013)about:internet -->var animator_picture = function(nom, chemin, extension){ this.chemin = chemin; this.extension = (extension !== undefined) ? extension : "png"; this.nom = nom; this.image = undefined; this.preload = function(callback){ var _this = this; var imageChargee = new Image() imageChargee.onload = function() { _this.image.style.width = "100%"; if(callback && typeof(callback) === "function") callback(_this); } imageChargee.src = this.chemin + this.nom + "." + this.extension this.image = imageChargee }}/* Animation du son*/var animator_sound = function(nom, chemin, extension, startAt){ this.chemin = chemin; this.extension = (extension !== undefined) ? extension : "mp3"; this.nom = nom; this.sound = undefined; this.startAt = (startAt !== undefined) ? startAt : 0; this.preload = function(callback){ var _this = this; var soundCharge = new Audio() soundCharge.onloadeddata = function() { if(callback && typeof(callback) === "function") callback(_this); }; soundCharge.src = this.chemin + this.nom + "." + this.extension this.sound = soundCharge }}/* Chargement des images et du son coté client */var animator = function(){ this.onStartPlaying = undefined; this.onStopPlaying = undefined; this.elementParent = undefined; this.images = []; this.sons = []; this.timeOutId = undefined; this.appendImages = function(tabImages){ this.images = this.images.concat(tabImages); } this.preloadAllImages = function(callback){ var compteur = 0; var compteurFinal = this.images.length; for(var i=0; i<this.images.length; i++){ if(this.images[i] instanceof animator_picture){ this.images[i].preload(function(img){ //console.log("image " + img.nom + " est chargée"); compteur++; if(compteur === compteurFinal){ if(callback && typeof(callback) === "function") callback(); } }); } else { console.warn(this.images[i], i, "Not a animator_picture"); } } } this.appendSounds = function(tabSounds){ this.sons = this.sons.concat(tabSounds); } this.preloadAllSounds = function(callback){ var compteur = 0; var compteurFinal = this.sons.length; for(var i=0; i<this.sons.length; i++){ if(this.sons[i] instanceof animator_sound){ this.sons[i].preload(function(son){ compteur++; if(compteur === compteurFinal){ if(callback && typeof(callback) === "function") callback(); } }); } else { console.warn(this.sons[i], i, "Not a animator_sound"); } } } this.preload = function(callback){ var imagesTelechargees = (this.images.length == 0) ? true : false; var sonsTelecharges = (this.sons.length == 0) ? true : false; var _this = this; var fin = function(){ if(imagesTelechargees && sonsTelecharges){ if(callback && typeof(callback) === "function") callback(); } } if(!imagesTelechargees){ this.preloadAllImages(function(){ imagesTelechargees = true; fin() }); } if(!sonsTelecharges){ this.preloadAllSounds(function(){ sonsTelecharges = true; fin() }); } } /* Lance l'animation - fps : number : description Frame per seconds Prend en compte le nombre d'image à ne pas dépasser Animation s'arrete des que toutes les images ont défilé 15 images par seconde Son se déclenche à la 15 eme image S'arrete automatiquement à la fin de toutes les images, ne se relance pas */ this.play = function(fps){ if(fps == undefined) fps = 15; var compteur = 0; var affichageSon = 0; var _this = this console.log('this.play') if(this.onStartPlaying && typeof(this.onStartPlaying) == "function") this.onStartPlaying(this); this.timeOutId = window.setInterval(function(){ if(compteur < _this.images.length){ //animation en cours var image = _this.images[compteur]; _this.elementParent.innerHTML = ''; _this.elementParent.appendChild(image.image) if(_this.sons.length > 0) { if(compteur == _this.sons[0].startAt){ //console.log('debut du son', compteur) _this.sons[0].sound.play() } } compteur++ } else { //animation finie //console.log('animation finie') if(_this.onStopPlaying && typeof(_this.onStopPlaying) == "function") _this.onStopPlaying(this); clearInterval(_this.timeOutId) } }, 1000/fps) }}/* Génère sons et images Images avec un début et une fin, une chaine de 4 caractères Son avec un début*/var imgAnimator = { create : function(elementParent, liste_images, son){ var _animation = new animator(); _animation.elementParent = elementParent; _animation.appendImages(liste_images); _animation.appendSounds(son); return _animation; }, generateListImages : function(repertoire, prefix_image, extension, start, end, formatageNbCharacter){ if(typeof(repertoire) !== "string") throw new Error("repertoire is not a string"); if(typeof(start) !== "number") throw new Error("Start is not a number"); if(typeof(end) !== "number") throw new Error("End is not a number"); var liste_images = []; for(var i=start; i<=end; i++){ var _i = i; if(formatageNbCharacter !== undefined){ var _i = i.toString(); if(_i.length < formatageNbCharacter){ for(var k=_i.length; k<formatageNbCharacter; k++){ _i = "0" + _i; } } } var nom = prefix_image + _i; var img = new animator_picture(nom, repertoire, extension); liste_images.push(img); } return liste_images; }, generateSound : function(repertoire, nom, extension, startAt){ if(typeof(repertoire) !== "string") throw new Error("repertoire is not a string"); var son = new animator_sound(nom, repertoire, extension, startAt); return son; }};// Objet principal dans le modèlewindow.imgAnimator = imgAnimator;})()



<script>

var repertoire = "../../../images/";
var imgs = imgAnimator.generateListImages(repertoire, "Perso_intro_web_", "png", 18, 126, 4)
var repertoire = "../../../sound/";
var son = imgAnimator.generateSound(repertoire,"anim-son","mp3", 15)
var animator = imgAnimator.create(document.getElementById('bonhommeAnimation'), imgs, son);



animator.onStopPlaying = function(){
//cacher l'animation
//ouverture de menu
console.log('Animation terminée')
}
animator.preload(function(){
console.log('Animation téléchargée')
animator.play(15);
})



</script>
Afficher la suite 

Votre réponse

4 réponses

Messages postés
23650
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 décembre 2018
0
Merci
Bonjour,

Pour commencer, merci de reposter ton code AVEC de l'indentation.
Là ..tout est sur une seule ligne !!!

Ensuite pour ta phrase :
je ne sais pas d'ou vient le soucis

La réponse c'est : de IE .......

Bon plus sérieusement... n'oublie pas de préciser sur quelle version d'IE tu rencontres le soucis.
Merci également d'indiquer ce que tu veux dire par "les images sautent" ...

Commenter la réponse de jordane45
Messages postés
2
Date d'inscription
jeudi 2 juin 2016
Dernière intervention
3 juin 2016
0
Merci
Bonjour

Voici de nouveau le code indexé

(function(){


/*
 Animation des images
 _this.image.style.width = "100%"; -> images en responsive
 
*/

var animator_picture = function(nom, chemin, extension){
 this.chemin = chemin;
 this.extension = (extension !== undefined) ? extension : "png";
 this.nom = nom;
 this.image = undefined;

 this.preload = function(callback){
  var _this = this;
  var imageChargee = new Image()
  imageChargee.onload = function() {
   _this.image.style.width = "100%";
   if(callback && typeof(callback) === "function") callback(_this); 
  }
  imageChargee.src = this.chemin + this.nom + "." + this.extension 
  this.image = imageChargee
 }
}

/*
 Animation du son
*/
var animator_sound = function(nom, chemin, extension, startAt){
 this.chemin = chemin;
 this.extension = (extension !== undefined) ? extension : "mp3";
 this.nom = nom;
 this.sound = undefined;
 this.startAt = (startAt !== undefined) ? startAt : 0;
 

 this.preload = function(callback){
  var _this = this;
  var soundCharge = new Audio()
  soundCharge.onloadeddata = function() {
   if(callback && typeof(callback) === "function") callback(_this); 
  };
  soundCharge.src = this.chemin + this.nom + "." + this.extension 
  this.sound = soundCharge
 }
}


/*
 Chargement des images et du son coté client
 */



var animator = function(){
 
 this.onStartPlaying = undefined;
 this.onStopPlaying = undefined;
 this.elementParent = undefined;
 this.images = [];
 this.sons = [];
 this.timeOutId = undefined;
 
 this.appendImages = function(tabImages){
  this.images = this.images.concat(tabImages);
 }

 
 this.preloadAllImages = function(callback){
  var compteur = 0;
  var compteurFinal = this.images.length;

  for(var i=0; i<this.images.length; i++){
   if(this.images[i] instanceof animator_picture){
    this.images[i].preload(function(img){
     //console.log("image " + img.nom + " est chargée");
     compteur++;
     if(compteur === compteurFinal){
      if(callback && typeof(callback) === "function") callback();
     }
    });
   } else {
    console.warn(this.images[i], i, "Not a animator_picture");
   }
  }

  
 }

 

 this.appendSounds = function(tabSounds){
   this.sons = this.sons.concat(tabSounds);
  }

 this.preloadAllSounds = function(callback){
  var compteur = 0;
  var compteurFinal = this.sons.length;

  for(var i=0; i<this.sons.length; i++){
   if(this.sons[i] instanceof animator_sound){
    this.sons[i].preload(function(son){
     compteur++;
     if(compteur === compteurFinal){
      if(callback && typeof(callback) === "function") callback();
     }
    });
   } else {
    console.warn(this.sons[i], i, "Not a animator_sound");
   }
  }
   
      
 }

 this.preload = function(callback){
  var imagesTelechargees = (this.images.length == 0) ? true : false;
  var sonsTelecharges = (this.sons.length == 0) ? true : false;
  var _this = this;
  var fin = function(){
   if(imagesTelechargees && sonsTelecharges){
    if(callback && typeof(callback) === "function") callback();
   }
  }
  if(!imagesTelechargees){
   this.preloadAllImages(function(){
    imagesTelechargees = true;
    fin()
   });
  }
  if(!sonsTelecharges){
   this.preloadAllSounds(function(){
    sonsTelecharges = true;
    fin()
   });
  }
 }

 /*
  Lance l'animation
  - fps : number : description Frame per seconds
  Prend en compte le nombre d'image à ne pas dépasser
  Animation s'arrete des que toutes les images ont défilé
  15 images par seconde

  Son se déclenche à la 15 eme image
  S'arrete automatiquement à la fin de toutes les images, ne se relance pas

 */
 this.play = function(fps){

  if(fps == undefined) fps = 15;

  var compteur = 0;
  var affichageSon = 0;
  var _this = this
  

  console.log('this.play')
  if(this.onStartPlaying && typeof(this.onStartPlaying) == "function") this.onStartPlaying(this);

  this.timeOutId = window.setInterval(function(){
   
   if(compteur < _this.images.length){
    
    //animation en cours
    var image = _this.images[compteur];
    _this.elementParent.innerHTML = '';
    _this.elementParent.appendChild(image.image)

    if(_this.sons.length > 0) {
     if(compteur == _this.sons[0].startAt){
      //console.log('debut du son', compteur)
      _this.sons[0].sound.play()
     }

    }

    compteur++

   

   } else {
    //animation finie
    //console.log('animation finie')
    if(_this.onStopPlaying && typeof(_this.onStopPlaying) == "function") _this.onStopPlaying(this);
    clearInterval(_this.timeOutId)
   }
  }, 1000/fps)
  

 }


}

/*
  Génère sons et images
  Images  avec un début et une fin, une chaine de 4 caractères
  Son avec un début
*/

var imgAnimator = {

 create : function(elementParent, liste_images, son){
  

  var _animation = new animator();
  _animation.elementParent = elementParent;
  _animation.appendImages(liste_images);
  _animation.appendSounds(son);
  return _animation;
 },

 generateListImages : function(repertoire, prefix_image, extension, start, end, formatageNbCharacter){
  if(typeof(repertoire) !== "string") throw new Error("repertoire is not a string");
  if(typeof(start) !== "number") throw new Error("Start is not a number");
  if(typeof(end) !== "number") throw new Error("End is not a number");

  var liste_images = [];

  for(var i=start; i<=end; i++){

   var _i = i;

   if(formatageNbCharacter !== undefined){
    var _i = i.toString();
    if(_i.length < formatageNbCharacter){
     for(var k=_i.length; k<formatageNbCharacter; k++){ _i = "0" + _i; }
    }
   }

   var nom = prefix_image + _i;
   var img = new animator_picture(nom, repertoire, extension);

   liste_images.push(img);
  }

  return liste_images;
 },
 generateSound : function(repertoire, nom, extension, startAt){
  if(typeof(repertoire) !== "string") throw new Error("repertoire is not a string");
    
  
  var son = new animator_sound(nom, repertoire, extension, startAt);

 
  return son;
 }
};

// Objet principal dans le modèle
window.imgAnimator = imgAnimator;



})()




Alors mon problème est présent sur toutes les versions internet explorer. Légèrement sur firefox également.
Les images représentent un personnage qui arrive sur le site, et a chaque changement d'images le personnage donne l'impression de clignoter.
Pour info apres plusieurs essaies le personnage ne clignote plus sur ie (le problème est de nouveau présent lors de la suppression de l'historique de navigation)

Merci par avance
Commenter la réponse de tamoil
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
bonjour
le script comporte bien une fonction de préchargement des image mais il semblerait que les images ne soit pas précharge j' ai un peut parcouru le script pour voir comment le préchargement ce fait et j'ai du mal a comprendre pour tracer ce qui ce pas c'est la galère
Commenter la réponse de @karamel
Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Dernière intervention
22 juin 2017
0
Merci
Bonjour,

pour vérifier que tes images sont bien pré chargées, tu peux utiliser les outils de développement (F12) et prendre l'onglet network et faire tourner ta routine. tu verras si les images sont chargées à ce moment la ou avant.

bonne jounée
Commenter la réponse de cgandco

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.