Temps de chargement de menus déroulants

Hello,

J'ai fait de gros menus déroulants pour notre boutique. Ils fonctionnent plutôt bien, sauf pour un gros point noir : leur temps de chargement.

Il faut passer par ce lien pour les voir (c'est encre en test): http://www.rueverte.fr/?menu_deroulant=true

Je ne pense pas que le menu soit trop lourd, c'est l'image d'arrière plan qui ne se charge pas assez vite. Il y aurait moyen de la précharger au plus tôt ?
Et d'autre part, l'arrière plan est en 2 parties, un premier div avec le bord droit en arrière plan, puis un second qui affiche le reste du fond du menu. Ca pénalise aussi le chargement, puisque c'est le bord droit qui sera chargé en premier et le menu sera toujours transparent, puis ensuite la partie principale. Il vaudrait mieux que ce soit l'inverse, mais je ne voit pas trop comment faire

Et un autre point, c'est que le javascript nécéssaire est initialisé via une fonction

$(document).ready(function()

Du coup sous firefox par exemple, si avant que la page ne soit totalement chargé on essaye de mettre sa souris sur le menu, il ne s'affichera pas, et même si on attend sagement que la page soit bien complètement chargée.

Le code total de l'intialisation des menus. Au niveau javascript comme html/css ce n'est pas grand chose, il y a simplement un div pour chaque menu qui est masqué/affiché avec un petit effet de transition :

    $(document).ready(function() {
      
      function addMega(){
		$(this).find(".menu_to_hide").stop().fadeTo(50, 1).show();
		$(this).find("a.menutop").addClass('menutop_actif');
        }
 
      function removeMega(){
		$(this).find(".menu_to_hide").stop().fadeTo(100, 0, function() { //Fade to 0 opactiy
      $(this).hide();  //after fading, hide it
  });
		$(this).find("a.menutop").removeClass('menutop_actif');
        }
 
    var megaConfig = {
         interval: 20,
         sensitivity: 1,
         over: addMega,
         timeout: 200,
         out: removeMega
    };
	
	$("li.mega .menu_to_hide").css({'opacity':'0'});
    $("li.mega").hoverIntent(megaConfig)

    });

Si vous voyez comment rendre ces menus plus rapides à tout les niveaux ... merci !
Modifié par colagen (29 Nov 2010 - 12:08)

Ok c'est résolu, le fond des menus est maintenant purement fait en css, j'ai simplifié un peu le code html, j'ai viré aussi l'effet de fondu javascript à l'affichage et voila.