用於Mega Menu的JavaScript加載速度緩慢

在我們的Magento網站上，我們有一個超級菜單，當鼠標懸停在菜單中的父項li元素上時出現。用於Mega Menu的JavaScript加載速度緩慢

但是，如果您在頁面加載時立即將鼠標懸停在菜單上，則超級菜單顯示不正常。

如果用戶網絡連接不好，情況會更糟糕。

檢查鉻檢查器後，我看到這是因爲類over未添加到父li。如果您等待一兩秒鐘並將&移出父li元素，則會添加over類，並且將mega菜單的display css屬性更改爲block。

我發現javascript增加了over類，它是我們使用script.js的主題的一部分。

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

});

任何想法爲什麼這個JavaScript會花這麼長的時間來加載？或者我可以改進它？

來源

2016-03-29 Holly

沒有回答你爲什麼需要這麼長時間來加載......你絕對可以放在一個半透明屏幕覆蓋，顯示了加載GIF。 js完全加載後隱藏它。 –

我同意@Ji_in_coding ---除非你做了一些嚴肅的代碼/服務器優化，否則大多數Magento商店的加載速度都很慢。最好的選擇是一個「加載」覆蓋，直到網站完全加載。 - Magento緩慢加載的「原因」很多。我冒昧地說，這不是「只是」加載緩慢的JS，而是服務器響應緩慢，由於巨大的吸引Magento放在它.. – Zak

我想我已經想通了。

的主題是增加當網頁上的所有已加載即當所有圖像，對象&幀已加載，加載的jQuery(window).load(function(){});內over類。我們在大多數頁面上都使用了Facebook小工具（框架）。

當HTML文檔準備就緒時，jQuery(document).ready(function(){});函數就會加載，在我們的例子中，這個速度會快得多，幾乎是一秒。

所以我乾脆搬到主題的鼠標懸停事件偵聽器內的jQuery(document).ready()功能

來源

2016-03-29 17:24:14 Holly

好找，它認爲它值得一個勾號 –

用於Mega Menu的JavaScript加載速度緩慢

回答

相關問題