Mike07
@Mike07

Как решить проблему localstorage с дозагрузкой стиля при функции переключения стиля на сайте?

На сайте https://deep.mike07.com/ есть сбоку виджет "Стили". Если выбрать стиль Dirty или White, то при переходе между страницами можно заметить, что загрузка страницы происходит не мгновенно, а сначала погружается начальный стиль, а потом уже установленный стиль. (при выборе стиля Dark такой проблемы нет т.к. он по стандарту). Сохранение стиля пользователя происходит с использованием localstorage.
Функция переключения такая вот:
function bindEvents(){

                    var css=document.getElementById('style');
                    var col=document.querySelectorAll('a.changeStyle');

                    for( var n in col )if( col[n].nodeType==1 ) col[n].onclick=function(e){
                        e.preventDefault();/* prevent jumping to top of page etc */
                        var el=typeof(e.target)!='undefined' ? e.target : e.srcElement;

                        css.href=el.dataset.style;
                        css.rel=el.dataset.rel;
                        css.type=el.dataset.type;

                        localStorage.setItem( 'style', el.dataset.style );
                    };

                    if( localStorage.getItem( 'style' )!=null ) css.href=localStorage.getItem( 'style' );
                }

                document.addEventListener( 'DOMContentLoaded', bindEvents, false );


Переключение происходит с помощью:
<a href='#' class='changeStyle' data-style='https://site.com/.../theme1.css' data-type='text/css' data-rel='stylesheet'>Dark</a>
<a href='#' class='changeStyle' data-style='https://site.com/.../theme2.css' data-type='text/css' data-rel='stylesheet'>Dirty</a>
<a href='#' class='changeStyle' data-style='https://site.com/../theme3.css' data-type='text/css' data-rel='stylesheet'>White</a>

В head стиль подключается:
<link id="style" href="https://site.com/.../theme1.css" rel="stylesheet">


Мне кажется, тут какая-то проблема с localstorage т.е. считывания данных происходит не сразу и поэтому в первые миллисекунды идет загрузка стандартной темы, а потом уже то, что записано в localstorage. Хотелось бы узнать, как решить эту проблему? Чтобы не было затормаживания и тема погружалась сразу же.
  • Вопрос задан
  • 107 просмотров
Пригласить эксперта
Ответы на вопрос 1
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Вариантов - несколько:
1. bindEvents() вызывайте не в "DOMContentLoaded", а в "onload" и там же грузите основной стиль (друг за другом).
2. Использовать includeHTML.
Ответ написан
Ваш ответ на вопрос

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

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