title: JavaScript for Mega Menu Loading Slowly
body: <p>On our Magento Website we have a mega-menu which appears when the mouse hovers over a parent <code>li</code> element in the menu.</p>
  
  <p>However, if you hover over the menu immediately as the page loads, the mega menu does not appear properly.</p>
  
  <p>It's much worse if the user has a poor internet connection.</p>
  
  <p>After checking the chrome inspector I see this is because the class <code>over</code> is not added to the parent <code>li</code>.  If you wait a second or two and move the mouse out &amp; back over the parent <code>li</code> element the <code>over</code> class is added and the <code>display</code> css property of the mega menu is changed to <code>block</code>.</p>
  
  <p>I've found the javascript adding the <code>over</code> class, it's part of the theme that we are using script.js.</p>
  
  <pre><code>//  CODE OMMITED FOR BREVITY
  jQuery(window).load(function() {
  
      //  CODE OMMITED FOR BREVITY
  
      if(jQuery('#nav-wide').length){
          jQuery('#nav-wide li.level-top').mouseenter(function(){
              jQuery(this).addClass('over');
              if(mobileDevice == true){
                  document.addEventListener('touchstart', wideMenuListener, false);
              }
          });
          jQuery('#nav-wide li.level-top').mouseleave(function(){
              jQuery(this).removeClass('over');
          });
  
          //  CODE OMMITED FOR BREVITY
      }
  
      //  CODE OMMITED FOR BREVITY
  
  });
  </code></pre>
  
  <p>Any idea why this javascript would take so long to load?  Or how I could improve it?</p>