Eviter le scintillement lors de manip css avec javascript...

Bonjour,

presque tout est dans le titre...
je rajoute quelques d�tails quand m�me,

Voil�, j'ai fais un petit jeu de bacgkammon...
Maintenant, qu'il marche, j'essaye de le rendre plus beau et de lui donner vite fait un petit aspect 3D...

pour ca, je dois calculer la dimension et la position de mes images a placer...
je d�finit le style par la syntaxe suivante:

Code:

---

monElem.style.attrib = valeur

---

Tout ca marche bien sauf que, le temps de calculer tout ca, je me retrouve avec mes images � la queue leu-leu dans un coin de mon div, pendant un temps, certes, tr�s court mais suffisant pour m'�nerver...

Connaissez vous un moyen de contourner cela
Ca m'�tonnerait que ca existe, mais une fonction qui freeze l'affichage le temps de tout calculer serait l'id�al...

Si ce sujet vous inspire n'h�sitez pas � me faire part de vos id�es...

Merci et bon weekend

EDIT:
cela pourrait-il venir selon vous que mes images cliquables sont englob�es dans des liens o� c'est le href qui d�finit l'action j'avascript � effectuer?
J'ai fait cela car je n'arrivait pas � d�finir l'�v�nement onclick en y passant une fonction avec des param�tres et qui marche avec tous les navigateurs que j'ai sous la main. (IE6, FF1.5 et Op�ra8)

bonjour,

avant le calcul (ou au d�but de la fonction) tu peux faire :

Code:

---

1 2	image.style.visibility = "hidden";

---

et apr�s le calcul voire m�me � la fin de la fonction :

Code:

---

1 2	image.style.visibility = "visible";

---

tu peux voir �galement avec style.display="none" et "block" mais je ne suis pas s�r que tu puisses calculer les positions des �l�ments si ceux-ci sont � none (car absents de la page). Avec visibility="hidden" les �l�ments sont dans la page mais cach�s.

Citation:

---

J'ai fait cela car je n'arrivait pas � d�finir l'�v�nement onclick en y passant une fonction avec des param�tres et qui marche avec tous les navigateurs que j'ai sous la main.

---

Normalement ceci ne devrait pas poser de probl�me quelque soit le navigateur :

Code:

---

1 2	<img onclick="Fonction(param1, param2)">

---

yo,

alors voil�, ta technique me semble simple et bonne.
J'ai toujours un scintillement, mais au moins je n'ai pas les images qui se courent apr�s le temps du calcul...
Le probl�me vient du fait que j'efface toutes mes images. Je calcule ce qu'il faut pour afficher les nouvelles et seulement ensuite, je les affiche...
Le r�sultat ne m'�tonne donc pas et j'assume.

Pour le coup du onclick, vu que je cr�e mes images a partir du DOM, il me semble que je n'ai pas le choix de d�finir ainsi:

Code:

---

1 2	myImg.onclick = la fonction

---

donc pour les param�tres, ca passe pas (sauf sous op�ra 8)
d'ailleurs en parlant d'op�ra, j'ai remarqu� que m�me avant l'am�lioration que tu m'as sugg�r�e, il n'y avait pas le moindre scintillement

C'est pas pour lancer des trolls et cie mais je trouve que op�ra est un tr�s bon browser...

Code:

---

myImg.onclick =function(){ la fonction }

---

salut, c'est plus vraiment dans le sujet mais c'est vrai que c'est moi qui ai commenc� � en parler...
Au d�but, j'avais �a:

Code:

---

1 2	myImg.onclick = 'backGammon.selectFleche(' + i + ')';

---

ca passait sous op�ra mais pas ailleurs...
par contre dans le href d'un lien pas de souci...

Code:

---

1 2	myLink.href = 'javascript:void(backGammon.selectFleche(' + i + '));';

---

Code:

---

myImg.onclick = function(){backGammon.selectFleche(i)};

---

mais je pense que tu auras un probl�me avec le i ... il te faudra faire une attribution dynamique d'attribut ...

Citation:

---

ta technique me semble simple et bonne.
J'ai toujours un scintillement, mais au moins je n'ai pas les images qui se courent apr�s le temps du calcul...

---

et si tu mettais un visibility="hidden" pour toutes tes images lors du chargement de la page ?

Code:

---

1 2	img{visibility: hidden}

---

puis tu mets visibility="visible" apr�s le calcul et uniquement pour l'image que tu as choisi de placer dans le jeu (elles doivent toutes porter un identifiant unique).

Citation:

---

et si tu mettais un visibility="hidden" pour toutes tes images lors du chargement de la page ?

Code :

img{visibility: hidden}

puis tu mets visibility="visible" apr�s le calcul et uniquement pour l'image que tu as choisi de placer dans le jeu (elles doivent toutes porter un identifiant unique).

---

oui oui,

C'est � peu pr�s ce que je fait...
En gros, je cr�e mon noeud img, je d�finit la visibilit� ainsi que tous les attributs qui m'interessent (largeur, top et left)...

je met l'image dans un tableau (javascript) puis seulement ensuite, je rajoute mon noeud au document...

en fin de fonction, je parcours mon tableau et je passe tout a visible...

Le souci, de toutes facons, vient que le jeu n'est pas tr�s optimis�...
j'ai mes pions (30) dans une div, et quand je r�actualises, je vire tout et je recalcule tout (m�me ce qui n'a pas boug�)...
Donc ca doit etre normal que ca prenne un peu de temps....