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