Заглушка на сайт при переключении
 

Здравствуйте!
У меня есть идея, но я не совсем понимаю как ее реализовать.
Пояснение
У меня есть сайт, который имеет переключатель на рус/англ язык. В скрипте переключателя есть куки, но они почему-то не работают. Размер шрифта и сам шрифт у языковых версий разный, соответственно, при переключении происходит визуальный "сдвиг" некоторых элементов сайта.
Задача
Мне нужна помощь, чтобы починить куки и добавить "заглушку" в момент переключения. Что-то вроде прелоадера на пару секунд, например, в виде белого фона, чтобы контент успел подгрузиться как надо и пользователь не видел этих сдвигов. Можно создать svg на весь экран или на каждый контейнер, но я пока не разобрался как это работает.

Вот сам скрипт:

(function() {
        var body = document.getElementsByTagName('body')[0];

        var switcherEN = document.getElementById('switcher-en');
        var switcherRU = document.getElementById('switcher-ru');

        // Заранее считаем срок хранения кук
        var expires = new Date();
        expires.setDate(expires.getDate() + 366);
        expires.toUTCString();

        // Русский и английский заголовки
        var titleEN = document.getElementById('title-en');
        var titleRU = document.getElementById('title-ru');
        var title = {
          en: titleEN.getAttribute('content'),
          ru: titleRU.getAttribute('content')
        }

        var switchLang = function() {
          var lang = this.id
          lang = lang.replace('switcher-', '');

          // Меняем класс для BODY
          body.className = lang;

          // Записываем куки
          document.cookie = [
            'aplang=' + lang, '; expires=' + expires // используем expires, max-age не поддерживается в ИЕ
            , '; path=/', '; domain=' + document.location.host
          ].join('');
          document.title = title[lang];
        }

        switcherEN.onclick = switchLang;
        switcherRU.onclick = switchLang;
      })();

jQuery на сайте

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Я конечно понимаю, что это всего лишь заморочка, но хочется, чтобы продукт и сайт были качественными.

Если есть jq, то и используйте его, зачем грузить под 100кб, если они не используются?

У вас в этом скрипте ничего не подгружается, как узнать, когда страница готова для показа?

(function() {
    $('#switcher-en,#switcher-ru').click(function() {
        const lang = this.id.toString().split('-').pop();

        let expires = new Date();
        expires = expires.setDate(expires.getDate() + 366).toUTCString();


        $('<div/>').attr({
            opacity: 0,
            'class': 'loader-layout'
        }).html(
            'Загрузка...'
        ).fadeIn(300, function() {
            document.body.className = lang;
            document.cookie = [
                'aplang=' + lang,
                'expires=' + expires, // используем expires, max-age не поддерживается в ИЕ
                'path=/',
                'domain=' + document.location.host
            ].join('; ');
            document.title = $('#title-' + lang).attr('content');


            setTimeout(function(that) {
                $(that).fadeOut(300, function() {
                    this.parentNode.removeChild(this);
                });
            }, 2000, this);
        });

    });
})();

На смену языка приходится 0.5-2s, даже при слабом соединении. На это время можно добавить заглушку, т.е. активация в момент нажатия на кнопку + 2s длительности (при клике по одной из двух). И все же, хотелось бы настроить куки. Каждый раз переключать, пользователям будет не удобно.

От чего это время зависит? Для чего требуется столько времени?
Заглушку я добавил, осталось css ей определить.
Что значит "настроить куки"?

Что-то не получается. Надо же заменить полностью скрипт на ваш? Если да, то при замене на скрипт выше, кнопки вовсе перестают работать. А время ни от чего не зависит. Нужно просто отталкиваться от момента "клика" по кнопке. В этот момент окно не перезагружается, просто происходит скрытие/появление блоков, в зависимости от языка. Попробуйте попереключать на сайте, вы поймете о чем речь.

Надо починить скрипт, добавить запоминание пользовательского выбора языка. Знать бы только как это сделать.

Да.
Консоль смотрели?
madeas.github.io - это же ваш сайт, я правильно понимаю?
Там указано, что вы - Frontend developer :)
Почему у вас столько тривиальная задача вызывает такие сложности?
Кука у вас уже записывается, осталось только прочитать сохраненное значение и кликнуть на нужную кнопку.

Не понял. Какую?)
Наверное, потому что пока не сталкивался с такой задачей. Если бы мог решить сам, логично предположить, что не стал бы здесь спрашивать.

Frontend developer и про консоль не слышал, чудеса :)
Почитайте: https://learn.javascript.ru/debugging-chrome

Консоль - понятие растяжимое)
Кажется и так разобрался.

Какую консоль кроме той, что в devTools еще можно использовать для отладки?

Так может вы о какой-то другой, откуда мне знать) Я мысли читать еще не научился) И не стоит язвить) Я сюда написал для получения совета, а не глупого троллинга)

madeas, Ок.

Ну так что, получилось у вас найти ошибку в моем коде?

Nexus,
да, убрал toUTCString. Переключатель работает.

все так, кука записывается.

const cookies=document.cookie.split('; ').reduce(function(r, i) {
    i = i.split('=', 2);
    r[i.shift()] = i.shift();

    return r;
}, {});
if(!!cookies.aplang)
	$('#switcher-'+cookies).click();

madeas,
заменить полностью на это

(function() {
    var langSave = localStorage.getItem("lang") || "en",
        title = {};
    ["en", "ru"].forEach(function(lang) {
        var elem = document.getElementById("title-" + lang);
        title[lang] = elem.getAttribute("content");
        elem = document.getElementById("switcher-" + lang);
        elem.addEventListener("click", function() {
            document.body.className = lang;
            document.title = title[lang];
            localStorage.setItem("lang", lang)
        });
        langSave == lang && elem.click()
    })
})();

рони,
спасибо. А можете объяснить, почему так же не работает тот что я скинул? Не могу понять что в нем не так. Переключатель работает, куки настроены, но при перезагрузке все сбрасывается.

Заглушку кстати так и не сделал. Попробую прилепить другую функцию вроде такой:

<a id="switcher-en" href="#">Открыть</a>

<div id="box"></div>
<script>
window.onload= function() {
	document.getElementById('switcher-en').onclick = (function(){
	$('#box').show(100).delay(300).hide(100);
  });
}
</script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

madeas, рони сразу значение из localStorage извлекает и далее использует его.

Как загрузить выбранный язык из кукисов я написал в посте 14.

Nexus,
спасибо.