Javascript, Firefox et les images

**talrashha** · 08/10/2008, 23h39

Bonjour,

J'ai déjà posté concernant ce problème, mais cela n'avais rien donné... mais maintenant j'ai quelques informations supplémentaires, donc voila mon problème :
J'ai créé une classe en Javascript pour déplacer des objets de type DIV a travers l'écran (pour faire arriver mes décors comme s'il entraient dans l'écran..). Ces déplacements sont effectués par une suite de d'appel à la fonction SetTimeOut()
Mon problème est que sous Firefox (et pas sous IE ni Safari), ce déplacement n'est pas fluide.... et encore, pas sur tous les postes. Je n'ai pas trouvé pourquoi le comportement diffère sur certains ordinateurs, par contre, je me suis apercu que mes objets se déplacent de façon fluide lorsqu'il n'y a aucune image dessus. Par contre, si j'ajoute une image en "background" sur mes DIV, et bien le déplacement est saccadé.

Donc ma question est la suivante : est-ce que quelqu'un a déjà eu un souci sous Firefox concernant le déplacement d'images en Javascript ?

Merci d'avance.

**le_chomeur** · 09/10/2008, 09h20

un morceau de code ?
l'optimisation peut y être pour beaucoup

**SpaceFrog** · 09/10/2008, 10h57

sans doute un souci de nouvelle instance de fonction ...

**le_chomeur** · 09/10/2008, 11h14

mouai , moi je dis on vote ^^
un morceau de code serais quand même le bienvenue

**talrashha** · 09/10/2008, 18h12

Très bien, même si je doute que le problème vienne du code puisqu'il fonctionne sous IE et Safar, et que lorsque j'enleve mes images, il fonctionne aussi sur FF.

Voici la fonction de déplacement :

Code :

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
 
function deplace(objet, pas_X, pas_fin_X, nb_change_X, pas_Y, pas_fin_Y, nb_change_Y) {
	//deplacement de l'objet	
	var tmpX=pas_X-objet.act*nb_change_X;
	var tmpY=pas_Y-objet.act*nb_change_Y;
	var evalue;
	if(objet.act==1) {
		evalue=(pas_X > pas_fin_X)||(pas_Y > pas_fin_Y);
	}
	else {
		evalue=(pas_X < pas_fin_X)||(pas_Y < pas_fin_Y);
	}
	document.getElementById(objet.name).style.left=document.getElementById(objet.name).offsetLeft+objet.act*objet.sensX*pas_X+"px";
	document.getElementById(objet.name).style.top=document.getElementById(objet.name).offsetTop+objet.act*objet.sensY*pas_Y+"px";
 
	//test de fin
	if(evalue) {	
		objet.process=setTimeout( function() { deplace(objet, tmpX, pas_fin_X, nb_change_X, tmpY, pas_fin_Y, nb_change_Y); }, objet.interv);
	}
	else {
		clearTimeout(objet.process);
		if(objet.act==1) {
			objet.set_show();
		}
		else {
			objet.set_hide();
		}
		this.act=0;
	}
}

"L'objet" passé en paramètre est en quelque sorte une grosse structure permettant de stocker des valeurs calculées dont je me sert, et quelques méthode pour finaliser le déplacement (les calculs étant légèrement arrondis). En principe, la durée de déplacement est la même pour chaque objets, donc, les déplacements sont toujours fait en même temps.
Remarque : La fluidité des déplacements est aussi fonction du nombre d'objets en déplacement.

Voilà, je reste à disposition pour toute autre question...

Merci

**SpaceFrog** · 09/10/2008, 18h48

pas la fonction ...

le html avec l'évènement declencheur ...

**talrashha** · 09/10/2008, 20h07

Et bien... la plupart des appel se font en ajax, mais le plus évident est au chargement de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript" language="javascript">
	var haut=null;
	var login=null;
	var menu_gauche=null;
	var contenu=null;
</script>
</head>
<body onLoad="chargement();" onResize="modif_taille();">

Voici la fonction "chargement" appelée :

Code :

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
 
function chargement() {
 
	var centre_X=document.getElementById("baseTaille").offsetLeft;
	var centre_Y=document.getElementById("baseTaille").offsetTop;
 
	haut = new create_objet("haut_page", -1024, 0, centre_X-512, 0);
	haut.set_hide();
	haut.set_pop();
	login=new create_objet("tab_login", centre_X*2, 90, centre_X+291, 90);
	login.set_hide();
	login.set_pop();
	menu_gauche = new create_objet("menu_gauche", -221, 90, centre_X-512, 90);
	menu_gauche.set_hide();
	menu_gauche.set_pop();
	contenu = new create_objet("contenu", centre_X-258, 2*centre_Y, centre_X-258, 300);
	contenu.set_hide();
	contenu.set_pop();
}

Et les fonctions "pop" appellent simplement la fonction déplace :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function objet_pop() {
	if(this.etat==0) {
		this.etat=-1;
		this.act=1;
		document.getElementById(this.name).style.visibility="visible";
		deplace(this, this.pas_init_X, this.pas_fin_X, this.dist_change_X, this.pas_init_Y, this.pas_fin_Y, this.dist_change_Y);
	}
}

Voila

**SpaceFrog** · 09/10/2008, 20h49

essaye une nouvelle instance de deplace ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
new deplace(this, this.pas_init_X, this.pas_fin_X, this.dist_change_X, this.pas_init_Y, this.pas_fin_Y, this.dist_change_Y);
	}

**talrashha** · 09/10/2008, 21h40

Oups, en effet, on m'avais déjà proposé cela... et je sais d'ailleurs pas pourquoi je l'ai enlevé... mais ça ne résout pas le problème...

**talrashha** · 10/10/2008, 12h52

Une information supplémentaire : il semble qu'avec FF sous Unix (Ubuntu 8.04 et Gentoo je.ne.sais.plus.combien), ou encore avec FF et MacOS X, l'affichage fonctionne très bien. Il n'y a donc que la version sous Windows qui ne marche pas... personne n'a jamais entendu parlé d'une chose pareil?

Javascript, Firefox et les images

JavaScript

Discussions similaires

Partager

Partager