Javascript, Firefox et les images

Version imprimable

08/10/2008, 23h39
talrashha

Javascript, Firefox et les images

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.
09/10/2008, 09h20
le_chomeur

un morceau de code ?
l'optimisation peut y être pour beaucoup
09/10/2008, 10h57
SpaceFrog

sans doute un souci de nouvelle instance de fonction ...
09/10/2008, 11h14
le_chomeur

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

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:

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 :)

09/10/2008, 18h48
SpaceFrog

pas la fonction ...

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

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

Code:

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:

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:

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

essaye une nouvelle instance de deplace ...

Code:

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);
	}

09/10/2008, 21h40
talrashha

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...
10/10/2008, 12h52
talrashha

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?