Discussion :

[MasterOfChakhaL]

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 :

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

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)

[Auteur]

bonjour,

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

Code :

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

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

et après le calcul voire même à la fin de la fonction :

Code :

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

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.

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 :

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

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

[MasterOfChakhaL]

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 :

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

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...

[SpaceFrog]

Code :

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

myImg.onclick =function(){ la fonction  }

[MasterOfChakhaL]

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 :

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

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 :

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

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

[SpaceFrog]

Code :

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

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 ...

[Auteur]

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 :

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

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

[MasterOfChakhaL]

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....