Discussion :

[talrashha]

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]

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

[SpaceFrog]

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

[le_chomeur]

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

[talrashha]

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]

pas la fonction ...

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