Добрый день! Прошу Вашей помощи!!!! На сайте mm3.ru есть меню с левой стороны. Изначально оно раскрыто и широкое. Так и должно быть. Потом мы его сворачиваем по клику (.х_block). Его свернутость сохраняется и при обновлении страницы тоже методом (localStorage) это тоже все отлично, НООО!!! только когда меню свернуто и мы обновляем страницу, это меню мелькает и становится развернутое, а потом снова закрытое/свернутое. Проблема именно в этом мелькании.
Меню находится в сайдбаре. У него класс .col-md-3
.col-md-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
При сворачивание меняется класс на .col-md-1
.col-md-1 {
-ms-flex: 0 0 3.333333% !important;
flex: 0 0 3.333333% !important;
max-width: 3.333333%!important;
padding:0!important;
}
Метод:
$(function(){
$('.х_block').click(function(){
$('.left_block').toggleClass('col-md-1');
localStorage.setItem("blockIsActive", $('.left_block').hasClass('col-md-1'));
});
var blockIsActive = localStorage.getItem("blockIsActive");
if (blockIsActive == "true") {
$('.left_block').addClass('col-md-1');
$('.left_block').removeClass('col-md-3');
}
});
Пробовал в DOM добавлять атрибуты ширины классу .col-md-1 style="max-width" - только этот атрибут к диву не добавляется.
Мысли: Понимаю что изначально страница загружается и берет код HTML, а затем подгружаются измененные стили. НЕ могу прощупать логику, кто сталкивался с этой проблемой!??? Очень надеюсь на Вас ГУРУ!!!! ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО.
Пробовал blockIsActive !== "false" сделать изначально его свернутым но раскрывать при загрузке. Все получается в точности наоборот. Когда свернутое меню при обновлении не скачет. Но скачет при первой загрузке от изначально свернутого до развернутого.
Так же скачет логотип...потому что скачет боковое меню.
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии: 1
Александр Мальцев
10.03.2020, 14:18
Добрый день!
Ну так правильно, у вас и будет мелькать. Сначала браузер загружает с сервера исходный вариант страницы и начинает его отрисовывать. После этого у вас выполняется код JavaScript, который изменяет классы у элементов. При изменении классов у вас элементы начинают отображаться по-другому. Это изменение не может происходить мгновенно, оно занимает некоторое время. Поэтому у вас и происходит мелькание.
Если вы хотите избавиться от мелькания, то нужно формировать это на сервере. Чтобы пользователю отдавалась страница сразу в одном или другом состоянии. В этом случае для получения данных из браузера можно использовать cookies.
Ну так правильно, у вас и будет мелькать. Сначала браузер загружает с сервера исходный вариант страницы и начинает его отрисовывать. После этого у вас выполняется код JavaScript, который изменяет классы у элементов. При изменении классов у вас элементы начинают отображаться по-другому. Это изменение не может происходить мгновенно, оно занимает некоторое время. Поэтому у вас и происходит мелькание.
Если вы хотите избавиться от мелькания, то нужно формировать это на сервере. Чтобы пользователю отдавалась страница сразу в одном или другом состоянии. В этом случае для получения данных из браузера можно использовать cookies.