Загрузите сохраненный класс localstorage прежде всего ⇐ Jquery

[Anonymous]

Я искал повсюду, но до сих пор не нашел решения этой проблемы. У меня вертикальное меню и по умолчанию оно развернуто. Когда я нажимаю кнопку переключения, как показано на изображении ниже, он добавляет класс verical-mini в тег body, а также сохраняет его внутри localstorage, что представляет собой свернутое состояние.

Теперь проблема, с которой я столкнулся, заключается в том, что на экранах с плохим подключением к Интернету или в браузерах Chrome и Edge при загрузке/обновлении страницы сначала отображается расширенный класс по умолчанию, и только после загрузки документа, если мини-класс существует в localstorage, он добавляет класс вертикального мини-класса в тег body.

Так можно ли загрузить сохраненный класс из localstorage перед чем-либо еще или хотя бы быстрее? поэтому мы не можем сначала увидеть развернутое состояние по умолчанию?

Я также попробовал разместить jquery внутри заголовка, но задержка все равно такая же.

Кто-то предложил мне предварительный загрузчик jquery, но это не альтернатива, поскольку на некоторых из моих страниц много контента, и загрузка документа займет некоторое время.

Код jQuery:

Код: Выделить всё

$(document).ready(function() {

$('.vertical-menu-toogle').click(function (event) {
event.preventDefault();

$('body').toggleClass('vertical-mini');

if($('body').hasClass('vertical-mini')){
localStorage.setItem('savedmini', 'vertical-mini');
}
else{
localStorage.removeItem('savedmini');
}
});

var savedmini = localStorage.getItem('savedmini');
if(savedmini !== ''){
$('body').addClass(savedmini);
}
else {
$('body').removeClass(savedmini);
}
});

CSS:

Код: Выделить всё

.vertical-menu {
height: 100%;
width: 250px;
}

.vertical-mini .vertical-menu {
width: 80px;
}

Подробнее здесь: https://stackoverflow.com/questions/441 ... thing-else