Sujet Précédent Sujet Suivant

Probleme affichage de mon script sur internet explorer

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

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
2 juin 2016 à 17:44
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" ...

0
Réponse 2 / 4
tamoil Messages postés 2 Date d'inscription jeudi 2 juin 2016 Statut Membre Dernière intervention 3 juin 2016
Modifié par tamoil le 3/06/2016 à 08:31
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
0
Réponse 3 / 4
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
3 juin 2016 à 09:37
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
0
Réponse 4 / 4
cgandco Messages postés 219 Date d'inscription mercredi 26 octobre 2011 Statut Membre Dernière intervention 22 juin 2017 9
4 juin 2016 à 13:01
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
0

Discussions similaires

test de connexion internet
titoftit -
soldier8514 -

2 réponses
Accès aux réponses d'un QCM dans le code JS
lemage57 -
KX -

4 réponses
Devis pour un site
Hurilam -
paulschnell -

9 réponses
création d'un portail de réservation d'un club de tennis
dinzeo -
trollshebus76 -

11 réponses
compter le nombre de visiteur sur un site avec php
fijou12 -
fijou12 -

4 réponses
Rejoignez-nous