Почему темная тема может мелькать, переходя по страницам сайта?

Dmitriy_2014 · 2024-08-07T17:38:31.0000000Z

Всем привет! Экспериментирую и хочу сделать самую простую версию переключения темы, использую этот кейс - https://frontendtoday.ru/articles/dark-mode-best-practice/ , вроде простой вариант с щелчком по кнопке и вроде все работает и вроде все устраивает, но есть баги. Код оттуда же: const button = document.querySelector('.button') const currentTheme = localStorage.getItem('theme') || 'light' button.addEventListener('click', function () { const theme = localStorage.getItem('theme') document.documentElement.setAttribute( 'data-theme', theme === 'light' ? 'dark' : 'light', ) localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light') }) document.documentElement.setAttribute('data-theme', currentTheme) Но происходит следующее: Почему-то когда включена темная тема и переходишь со страницы на страницу, такое ощущение, ну вернее это видно глазом, как будто бы сначала прогружается светлая белая тема, а потом мгновенно становиться темная, это выглядит очень быстро как мелькание, мерцание, мигание и остается как и положено на темном варианте. Я ещё сначала обернул все это в jQuery(document).ready, так оно мигало при каждом переходе, потом убрал document . ready и вроде перестало, но все равно иногда подмигивает. Может быть это из-за того что js файл в футере, или этот код лучше перенести как-то в хеад перед вызовом css файла стилей. Или это связано с кешем, я уж и не знаю Заранее всем спасибо за ответы!

236

Snake800

9 августа 2024, 13:34

#11

Dmitriy_2014 #:
JavaScript говорит мне, что мальчик хочешь на кнопку нажать, а ничего не выйдет, теперь скрипт выше кнопки и поэтому кнопки как бы и нет ХА-ХА – null тебе в ребро :)

Можно разделить скрипт на 2 части. Вот это -

const currentTheme = localStorage.getItem('theme') || 'light'

document.documentElement.setAttribute('data-theme', currentTheme)

оставить в <head>, осталное в подвал вместе с остальными скриптами.

370

Dmitriy_2014

9 августа 2024, 13:37

#12

Snake800 #:

Можно разделить скрипт на 2 части. Вот это -

оставить в <head>, осталное в подвал вместе с остальными скриптами.

Я вот думаю отдельный js файл сделать, только для переключения темы, или все остальное обернуть в jQuery(document).ready – ну типа чтобы оно потом грузилось.

370

Dmitriy_2014

9 августа 2024, 14:21

#13

Подскажите, это document.addEventListener('DOMContentLoaded', по сути тоже самое что и это jQuery(document).ready? То есть ждет ожидания построения/загрузки DOM и только после него начинает что-то делать?

236

Snake800

9 августа 2024, 16:03

#14

Dmitriy_2014 #:
document.addEventListener('DOMContentLoaded', по сути тоже самое что и это jQuery(document).ready?

По большому счёту да. Есть разница в том, что метод в jQuery ready сработает в любом случае, а DOMContentLoaded может быть не вызван, если событие навешано уже после вызванного браузером события загрузки.

370

Dmitriy_2014

9 августа 2024, 16:18

#15

Snake800 #:

По большому счёту да. Есть разница в том, что метод в jQuery ready сработает в любом случае, а DOMContentLoaded может быть не вызван, если событие навешано уже после вызванного браузером события загрузки.

А можно ли сказать что эти методы - document.addEventListener('DOMContentLoaded' и jQuery(document).ready,

Это тоже самое, если бы я разместил скрипты в footer’е, перед закрывающим тегом body. По сути тоже сначала загрузится страница, а потом скрипты?

Что лучше? PNG vs Спрашиваем и отвечаем по Добавление класса при просмотре

236

Snake800

9 августа 2024, 16:24

#16

Dmitriy_2014 #:
Это тоже самое, если бы я разместил скрипты в footer’е, перед закрывающим тегом body. По сути тоже сначала загрузится страница, а потом скрипты?

Да. В данном случае можно использовать любой из них.

Яндекс Вебмастер вынес товарные фиды в отдельный раздел

Все что нужно знать о DDоS-атаках грамотному менеджеру