Заглушка на сайт при переключении
Здравствуйте!
У меня есть идея, но я не совсем понимаю как ее реализовать. Пояснение У меня есть сайт, который имеет переключатель на рус/англ язык. В скрипте переключателя есть куки, но они почему-то не работают. Размер шрифта и сам шрифт у языковых версий разный, соответственно, при переключении происходит визуальный "сдвиг" некоторых элементов сайта. Задача Мне нужна помощь, чтобы починить куки и добавить "заглушку" в момент переключения. Что-то вроде прелоадера на пару секунд, например, в виде белого фона, чтобы контент успел подгрузиться как надо и пользователь не видел этих сдвигов. Можно создать 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);
});
});
})();
|
Цитата:
|
Цитата:
Заглушку я добавил, осталось css ей определить. Цитата:
|
Что-то не получается. Надо же заменить полностью скрипт на ваш? Если да, то при замене на скрипт выше, кнопки вовсе перестают работать. А время ни от чего не зависит. Нужно просто отталкиваться от момента "клика" по кнопке. В этот момент окно не перезагружается, просто происходит скрытие/появление блоков, в зависимости от языка. Попробуйте попереключать на сайте, вы поймете о чем речь.
Надо починить скрипт, добавить запоминание пользовательского выбора языка. Знать бы только как это сделать. |
Цитата:
Цитата:
Цитата:
Там указано, что вы - Frontend developer :) Почему у вас столько тривиальная задача вызывает такие сложности? Кука у вас уже записывается, осталось только прочитать сохраненное значение и кликнуть на нужную кнопку. |
Цитата:
Цитата:
|
Цитата:
Почитайте: https://learn.javascript.ru/debugging-chrome |
Консоль - понятие растяжимое)
Кажется и так разобрался. |
Цитата:
|
| Часовой пояс GMT +3, время: 06:14. |