Показать сообщение отдельно
  #1 (permalink)  
Старый 09.06.2018, 08:54
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

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


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

Последний раз редактировалось madeas, 09.06.2018 в 09:10.
Ответить с цитированием