Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Заглушка на сайт при переключении (https://javascript.ru/forum/dom-window/74052-zaglushka-na-sajjt-pri-pereklyuchenii.html)

madeas 09.06.2018 08:54

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


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

Nexus 09.06.2018 09:30

Если есть 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);
        });

    });
})();

madeas 09.06.2018 09:46

Цитата:

Сообщение от Nexus (Сообщение 486974)
как узнать, когда страница готова для показа?

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

Nexus 09.06.2018 09:57

Цитата:

Сообщение от madeas
На смену языка приходится 0.5-2s, даже при слабом соединении.

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

Сообщение от madeas
И все же, хотелось бы настроить куки. Каждый раз переключать, пользователям будет не удобно.

Что значит "настроить куки"?

madeas 09.06.2018 10:07

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

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

Nexus 09.06.2018 11:12

Цитата:

Сообщение от madeas
Что-то не получается. Надо же заменить полностью скрипт на ваш?

Да.
Цитата:

Сообщение от madeas
Надо же заменить полностью скрипт на ваш? Если да, то при замене на скрипт выше, кнопки вовсе перестают работать

Консоль смотрели?
Цитата:

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

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

madeas 09.06.2018 11:46

Цитата:

Сообщение от Nexus (Сообщение 486992)
Консоль смотрели?

Не понял. Какую?)
Цитата:

Сообщение от Nexus (Сообщение 486992)
Почему у вас столько тривиальная задача вызывает такие сложности?

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

Nexus 09.06.2018 11:54

Цитата:

Сообщение от madeas
Не понял. Какую?)

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

madeas 09.06.2018 11:54

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

Nexus 09.06.2018 11:57

Цитата:

Сообщение от madeas
Так вы уточняйте про какую) Их, как бы, много)

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


Часовой пояс GMT +3, время: 06:10.