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

tamoil 2 Messages postés jeudi 2 juin 2016Date d'inscription 3 juin 2016 Dernière intervention - 2 juin 2016 à 17:33 - Dernière réponse : cgandco 219 Messages postés mercredi 26 octobre 2011Date d'inscription 22 juin 2017 Dernière intervention
- 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 

4 réponses

Répondre au sujet
jordane45 19701 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 17 janvier 2018 Dernière intervention - 2 juin 2016 à 17:44
0
Utile
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
tamoil 2 Messages postés jeudi 2 juin 2016Date d'inscription 3 juin 2016 Dernière intervention - Modifié par tamoil le 3/06/2016 à 08:31
0
Utile
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
@karamel 1652 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 8 janvier 2018 Dernière intervention - 3 juin 2016 à 09:37
0
Utile
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
cgandco 219 Messages postés mercredi 26 octobre 2011Date d'inscription 22 juin 2017 Dernière intervention - 4 juin 2016 à 13:01
0
Utile
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.