如何設置Jquery菜單的緩存？

我已經添加了一個OpenCart 1.5x商店的JQuery，它的工作原理和看起來不錯。如何設置Jquery菜單的緩存？

但是，當您切換到新頁面時，似乎存在延遲，並且它會隨着非風格菜單「閃爍」，然後在加載後顯示Jquery菜單。它發生得很快但很明顯。

有沒有一種方法來緩存Jquery菜單，使它看起來像是在頁面之間彈跳？

(function($) { 

$.fn.menumaker = function(options) { 

    var cssmenu = $(this), previousWidth = $(window).width(), settings = $.extend({ 
title: "Menu", 
format: "dropdown", 
sticky: false 
}, options); 

    return this.each(function() { 
    cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>'); 
    $(this).find("#menu-button").on('click', function(){ 
     $(this).toggleClass('menu-opened'); 
     var mainmenu = $(this).next('ul'); 
     if (mainmenu.hasClass('open')) { 
     mainmenu.hide().removeClass('open'); 
     } 
     else { 
     mainmenu.show().addClass('open'); 
     if (settings.format === "dropdown") { 
      mainmenu.find('ul').show(); 
     } 
     } 
    }); 

    cssmenu.find('li ul').parent().addClass('has-sub'); 

    multiTg = function() { 
     cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); 
     cssmenu.find('.submenu-button').on('click', function() { 
     $(this).toggleClass('submenu-opened'); 
     if ($(this).siblings('ul').hasClass('open')) { 
      $(this).siblings('ul').removeClass('open').hide(); 
     } 
     else { 
      $(this).siblings('ul').addClass('open').show(); 
     } 
     }); 
     }; 

    if (settings.format === 'multitoggle') multiTg(); 
    else cssmenu.addClass('dropdown'); 

    if (settings.sticky === true) cssmenu.css('position', 'fixed'); 

    resizeFix = function() { 

if($(window).width() == previousWidth) return; 

     if ($(window).width() > 768) { 
     cssmenu.find('ul').show(); 
     } 

     if ($(window).width() <= 768) { 
     cssmenu.find('ul').hide().removeClass('open'); 
     } 
    }; 
    resizeFix(); 
    return $(window).on('resize', resizeFix); 

    }); 
    }; 
     })(jQuery); 

(function($){ 
$(document).ready(function(){ 

$("#cssmenu").menumaker({ 
title: "Menu", 
format: "multitoggle" 
}); 

}); 
})(jQuery);

來源

2015-11-03 Melda S

一些代碼將在這一個真正的幫助！ – Andyjm

'$（document）.ready（function（）{'意味着：*當DOM樹完全加載時執行這段代碼*。這就是你的滯後，爲了避免它，你需要用CSS畫菜單或直接服務器端頁面。 –

對於一件事你應該將其設定爲最高瓦爾緩存你的選擇，這裏有一個例子：

var $window = $(window), 
    $document = $(document), 
    $footer = $('#footer'), 
    $sidebar = $('#sidebar'), 
    $images = $('img');

來源

2015-11-04 04:42:54

如何設置Jquery菜單的緩存？

回答

相關問題