Здравствуйте.
Решил поработать на чистом JS, и возник банальный вопрос, который не могу понять как решить:
Есть две функции, одна открывает, вторая закрывает Боковое меню:
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("mySidenav").className += ' mySidenavOpen';
document.getElementById("opener").style.display = "none";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.getElementById("mySidenav").classList.remove("mySidenavOpen");
document.getElementById("opener").style.display = "block";
}
И тут столкнулся с тем, что после того, как я открыл меню, и перехожу на другую страницу (обычный сайт с шаблонами, не SPA), то, естественно, меню по умолчанию закрыто, для чего решил юзать куки:
Изменил функцию открытия меню, описанную выше, добавив в неё сэт куки:
function openNav() {
...
Cookies.set('mySidenav', 'open');
}
И перед всем этим делом, проверяю, есть ли в куках значение:
if (Cookies.get('mySidenav')) {
if (Cookies.get('mySidenav') === 'open') {
openNav();
}
}
И теперь, что очевидно, при каждой загрузке страницы, меню открывается, но только после загрузки всего JS, при этом не являясь открытым по умолчанию (при рендеринге HTML).
Подскажите, как реализовать это правильно?
Если работать с LocalStorage, то суть не поменяется, ведь нужно, в любом случае, ждать, пока по ключу будет получено значение.
Думал про прелоадер, но дело в том, что страницы сейчас грузятся крайне быстро, в связи с малым весом статики и отсутствием медиа, и не хочется портить всё это впечатление бросающейся в глаза "подгрузкой" контента.
ПРИМЕЧАНИЕ
Куки получаю при помощи js-cookie
Все подключения js файлов идут перед закрывающимся тегом .
Ради решения этой задачи не хочу менять расположение скриптов.
Ответ
Вот это да, вопрос задан 9 месяцев назад, и никто так и не ответил. Отвечу, лучше поздно, чем никогда )
Я сталкивался с такой проблемой, и решил ее вот так:
Делаем для враппера (body) всего контента visibility: hidden; opacity: 0; transition: opacity .6s;
на событие window on load врапперу добавляем класс .is-loaded котороый сделает visibility: visible; opacity: 1;
В итоге получаем на мгновение белый экран и быстрое плавное появление контента с работающими слайдерами, меню, селект2 и без дерганья. Очень приятно выглядит.
Комментариев нет:
Отправить комментарий