Question

我已经在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);

Answer 1

首先，您应该通过将选择器设置为vars来缓存选择器，这是一个示例：

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

如何设置Jquery菜单的缓存？

1 个答案: