如何设置Jquery菜单的缓存？

我已经在OpenCart 1.5x商店中添加了一个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);

（函数（$）{
$.fn.menumaker=函数（选项）{
var cssmenu=$（this），previousWidth=$（window.width（），settings=$.extend({
标题：“菜单”，
格式：“下拉列表”，
粘性：假
}，选项）；
返回此值。每个（函数（）{
cssmenu.prepend（“”+settings.title+“”）；
$（this）.find（#菜单按钮”）.on（'click'，function（）{
$（this.toggleClass（'menu-opened'）；
var mainmenu=$（this.next（'ul'）；
如果（mainmenu.hasClass（'open'））{
main menu.hide（）.removeClass（'open'）；
}
否则{
main menu.show（）.addClass（'open'）；
如果（settings.format==“下拉列表”）{
main menu.find（'ul'）.show（）；
}
}
});
cssmenu.find（'li-ul'）.parent（）.addClass（'has-sub'）；
multiTg=函数（）{
cssmenu.find（“.has sub”）.prepend（“”）；
cssmenu.find（“.submenu button”）。在（'click'，function（）上{
$（this.toggleClass（'submenu-opened'）；
if（$（this）.sibbins（'ul'）.hasClass（'open'））{
$（this）.sides（'ul'）.removeClass（'open'）.hide（）；
}
否则{
$（this）.this（'ul'）.addClass（'open'）.show（）；
}
});
};
如果（settings.format==='multitogle'）multiTg（）；
else cssmenu.addClass（'dropdown'）；
如果（settings.sticky==true）cssmenu.css（'position'，'fixed'）；
resizeFix=函数（）{
if（$（window）.width（）==previousWidth）返回；
如果（$（窗口）.width（）>768）{
cssmenu.find（'ul'）.show（）；
}
if（$（window）.width（）首先，您应该通过将选择器设置为变量来缓存它们，下面是一个示例：

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

一些代码在这方面真的很有帮助！
$（document）。ready（function（）{
的意思是：在DOM树完全加载时执行此代码。这是您的延迟。为了避免它，您需要使用CSS绘制菜单或直接使用服务器端页面。