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

Question

[Mike 07]

На сайте 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. Хотелось бы узнать, как решить эту проблему? Чтобы не было затормаживания и тема погружалась сразу же.

Answer 1

[xmoonlight]

Вариантов - несколько:
1. bindEvents() вызывайте не в "DOMContentLoaded", а в "onload" и там же грузите основной стиль (друг за другом).
2. Использовать includeHTML.

Comments

[Mike 07]

2 не получилось, а 1 не знаю как делать правильно

[xmoonlight]

Mike 07, покажите, что не получилось.

[Mike 07]

xmoonlight, я загрузил файл includeHTML.js в папку js темы сайта. Вставил в header.php


Потыкал в этот тэг и попытался его в разных местах повставлять:


Пытался скрипты оттуда вставить в header.

Ничего не помогло. Частично проблема решилась вот этим скриптом:

Но тоже, иногда мерцает. (но хоть не через раз)

[xmoonlight]

Mike 07, код - где?

[Mike 07]

xmoonlight, не отобразился. Сейчас еще раз с тэгами
В header.php перед скриптом, но после подключения стилей:
<script src="js/includeHTML.js"></script>

После вставил:
<div data-src="header.html">

А перед :
</div>

Потом попробовал на всякий случай перед функцией:

<script>
       includeHTML('header.html', document.getElementById('header'));
       includeHTML('menu.html', document.getElementById('mainMenu'));
       includeHTML('green.css');
       includeHTML('js/1.js');
       includeHTML('log.txt','log');
    </script>

и

<script>
      includeHTML('header.html', document.getElementById('header'), function(){
        includeHTML('menu.html', document.getElementById('mainMenu'));
      });
    </script>

Не знаю, как оно должно работать, но ничего не произошло.

[xmoonlight]

Mike 07, ОМГ! И не должно было произойти! Т.к. это примеры использования.