@Alexfixer

Как убрать мерцание при обновлении страницы?

Короче мерцает сайт при обновлении страницы, когда ставлю ночную тему . Переключение стилей сделано с помощью js. Поставил body Display: none; а после загрузки скрипта поставил display: block после этого в хроме не вижу мерцаний, в других браузерах типа яндекса и файрфокса всё равно мерцает. Для наглядности можно посмотреть тут ".."
Может ещё как то по другому можно избежать мерцания?
  • Вопрос задан
  • 150 просмотров
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08
Мерцает потому что сначала применяются стили светлой темы, а потом темной. Сделай так, что применялись либо те, либо другие. Либо чтоб все было в одном CSS файле, а для body задай класс theme-light/dark
Ответ написан
@asd111
Чтобы поставить темную тему не нужно все делать невидимым а потом включать обратно. Достаточно сразу поменять стили.
Первая ссылка в гугле.
<head>
    <script>
    function setStyleSheet(url){
       var stylesheet = document.getElementById("stylesheet");
       stylesheet.setAttribute('href', url);
    }
    </script>

    <link id="stylesheet" rel="stylesheet" type="text/css" href="stylesheet1.css"/>
</head>
<body>
    <a onclick="setStyleSheet('stylesheet1.css')" href="#">Style 1</a>
    <a onclick="setStyleSheet('stylesheet2.css')" href="#">Style 2</a>
</body>
Ответ написан
@DRIMchansky
Быстрее всего поможет заинлайнить условие на выбор темы при загрузке как можно выше, прямо в head до загрузки стилей. На скорость эти пара строчек никак не повлияют, а в случае неработающих скриптов можно оставить какую-то одну тему, а переключатель скрыть
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы