При обновлении страницы свернутое меню мелькает

Mihail
Mihail
819
1
Добрый день! Прошу Вашей помощи!!!! На сайте 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

  1. Александр Мальцев
    Александр Мальцев
    10.03.2020, 14:18
    Добрый день!
    Ну так правильно, у вас и будет мелькать. Сначала браузер загружает с сервера исходный вариант страницы и начинает его отрисовывать. После этого у вас выполняется код JavaScript, который изменяет классы у элементов. При изменении классов у вас элементы начинают отображаться по-другому. Это изменение не может происходить мгновенно, оно занимает некоторое время. Поэтому у вас и происходит мелькание.

    Если вы хотите избавиться от мелькания, то нужно формировать это на сервере. Чтобы пользователю отдавалась страница сразу в одном или другом состоянии. В этом случае для получения данных из браузера можно использовать cookies.