Banner Toggler Demo

Banner Toggler Demo /* Скрываем переключатель по умолчанию (до выполнения JS), чтобы избежать визуального "мелькания" */ .nav-banner { display: none; } /* Небольшие стили для демо */ body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding: 20px; } .menu-group { margin-bottom: 12px; } .checkbox-label { cursor: pointer; user-select: none; } // Простые обёртки для localStorage function getItem(key) { return localStorage.getItem(key); } function setItem(key, value) { localStorage.setItem(key, value); } function updateBannerToggler() { const bannerToggler = document.querySelector('#bannerToggler'); const bannerTogglerBlock = document.querySelector('.nav-banner'); const banner = document.querySelector('.main-rev-slider'); const storedDevMode = getItem('dev-mode'); if (banner) { // Показать блок переключателя (убираем display:none из CSS) if (bannerTogglerBlock) { bannerTogglerBlock.style.display = ''; } // Установить состояние чекбокса по сохранённому значению if (bannerToggler) { bannerToggler.checked = (storedDevMode === 'true'); } // Применить src баннера сразу (чтобы не было "мигания" контента) const isDev = bannerToggler ? bannerToggler.checked : (storedDevMode === 'true'); if (isDev) { banner.src = `https://slider.eurosvet.ru/dev-for-preview?rnd=${Math.random()}`; } else { banner.src = `https://slider.eurosvet.ru/minimir-new?rnd=${Math.random()}`; } } else { // Если баннера нет — скрыть переключатель if (bannerTogglerBlock) { bannerTogglerBlock.style.display = 'none'; } } } function bannerTogglerOnChange() { const bannerToggler = document.querySelector('#bannerToggler'); const bannerTogglerBlock = document.querySelector('.nav-banner'); const banner = document.querySelector('.main-rev-slider'); const isDev = bannerToggler ? bannerToggler.checked : false; if (banner) { if (bannerTogglerBlock) { bannerTogglerBlock.style.display = ''; } if (isDev) { banner.src = `https://slider.eurosvet.ru/dev-for-preview?rnd=${Math.random()}`; setItem('dev-mode', 'true'); } else { banner.src = `https://slider.eurosvet.ru/minimir-new?rnd=${Math.random()}`; setItem('dev-mode', 'false'); } } else { if (bannerTogglerBlock) { bannerTogglerBlock.style.display = 'none'; } } } document.addEventListener('DOMContentLoaded', function () { const bannerToggler = document.querySelector('#bannerToggler'); // Добавляем обработчик до первого вызова update if (bannerToggler) { bannerToggler.addEventListener('change', bannerTogglerOnChange); } // Вызов обновления (передаём функцию, а не результат её вызова) // setTimeout здесь используется чтобы дать рендеру завершиться; // можно также вызвать напрямую updateBannerToggler() setTimeout(updateBannerToggler, 0); }); Кратко (по-русски), почему мелькает и как исправить: - Причина 1: элемент .nav-banner видим по умолчанию в HTML/CSS, а JS только затем скрывает или настраивает его — поэтому он сначала рисуется, а потом скрывается/изменяется => "мигание". - Решение: скрыть блок по умолчанию в CSS (например, .nav-banner { display: none; }) и показать его в JS только если нужно (bannerTogglerBlock.style.display = ''). - Причина 2: в исходном коде была ошибка setTimeout(updateBannerToggler(), 0) — это вызов функции сразу (передаёт в setTimeout её результат), а не отложенный вызов. - Решение: передавать ссылку на функцию: setTimeout(updateBannerToggler, 0) или просто вызвать updateBannerToggler() после добавления обработчиков. - Рекомендация: упростите логику, определяя состояние по bannerToggler.checked, чтобы избежать инверсий и путаницы. В предложенном коде это сделано. Если нужно, могу прислать минимальный патч для вашего проекта или показать только конкретные строкы для правки.