[Résolu] Vitesse d'exécution de onclick

Bonjour à tous,

Je viens vous présenter un problème dont je n'ai trouvé la réponse nul part jusqu'à présent.
J'ai développé pour ma société un projet de site e-commerce dont le menu est extrêmement long. Sur ce critère, nous avons décidé d'utiliser un menu à 3 niveaux.

Le niveau 1 s'affiche comme étant le menu du site: Accueil, Catégorie1, Catégorie2, etc.
Le niveau 2 lui s'affiche lors d'un rollhover sur le label du niveau 1.
Le niveau 3 s'affiche (en théorie) lors d'un onclick sur un des labels du niveau 2.

Si je schématise la chose:

[#green]Catégorie 1[/#]
   [#darkblue]Sous-catégorie 1[/#]
      [#brown]Sous-sous catégorie 1
      Sous-sous catégorie 2
      Sous-sous catégorie 3[/#]
   
   [#darkblue]Sous-catégorie 2[/#]
      [#brown]Sous-sous catégorie 4
      Sous-sous catégorie 5[/#]

Le rollhover et donc l'affichage des niveaux 2 se passe sans aucun soucis sous IE, FF, Safari, etc.
Par contre, lors du premier onclick sur un niveau 2, IE met entre 2 et 3 secondes avant d'afficher le niveau 3. Pour les clicks suivant, aucun problème par contre :s

Voici le code Javascript pour l'affichage du niveau 3:

<script type="text/javascript">
function submenu_show(target) {
   document.getElementById(target).style.display='block';
}
</script>

Le code d'une partie du menu

<div>
   <a href="#" title="" onclick="submenu_show('sm_1'); return false;">Sous-catégorie 1</a>
   <div id="sm_1" name="sm_1" style="display: none;">
      <a href="" title="">Sous-sous catégorie 1</a>
      <a href="" title="">Sous-sous catégorie 2</a>
      <a href="" title="">Sous-sous catégorie 3</a>
   </div>
</div>

A noter que si je met un "onmouseover" à la place du onclick, je n'ai aucun temps de latence que ce soit au premier click ou aux suivant. Il n'y a que l'utilisation de onclick, ou onmouseup, sous IE qui donne ce temps de réponse très long, sur le 1er click uniquement!

Auriez-vous une idée du problème rencontré, ainsi qu'une solution?

Voici également la liste des librairies utilisées au cas où un conflit existerait:
- xajax
- scriptaculous
- jquery

Machine de test pour IE: Windows XP avec IE7 et IE8

En vous remerciant,
V
Modifié par Vivamedia (13 Sep 2010 - 17:22)

Salut et bienvenue sur Alsacréations !

A vue de nez, ton problème semble provenir d'autres scripts susceptibles de tourner en arrière-plan (ce n'est pas un onclick qui fait ramer un navigateur).

Aussi, il n'y a rien de tel qu'utiliser 3 librairies pour plomber un projet; cela montre un certain manque d'expertise en JS étant donné qu'un simple jQuery aurait suffit à répondre à l'ensemble des demandes. (On rencontre souvent ce cas lorsque plusieurs développeurs de niveaux différents sont intervenus sur le projet... sans qu'ils aient eu le temps de s'adapter au code existant face aux demandes "urgentes" du client)

Ceci dit, maintenant que le mal est fait, tu peux, par exemple, te servir du Profiler de Firebug au sein de Firefox pour voir quelles sont les fonctions susceptibles de mettre à genoux ton navigateur. (particulièrement au moment où ton second niveau est ouvert car c'est certainement à ce moment là que quelque chose tourne derrière)
Modifié par koala64 (13 Sep 2010 - 15:37)

Bonjour,

Merci pour cette réponse, car elle m'a mise sur la piste du problème.
Le soucis venait d'un conflit entre jQuery et Scriptaculous/Prototype. Ne nécessitant cette dernière que pour quelques petits effets, j'ai converti ces effets en évènements jQuery.

Quand à xajax, il semble parfaitement cohabiter avec jQuery. Leurs utilisations n'étant pas du tout la même, les deux me sont nécessaires.

En vous remerciant encore,
V