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