Анимация при загрузке

Планируется ли добавить разные варианты анимации при загрузке? С возможностью выбора.

Или подскажите, как можно её поменять самому?

1 ответ

programmer

16 февраля 2018 17:09

О какой именно анимации идет речь? Предположу, что о той, что отображается при загрузке самой странице - прелоадере. Разные его варианты делать не планировалось. Есть в этом какой-то смысл? Это всего лишь индикатор загрузки, который выглядит нейтрально.

Изначально он был добавлен нами исключительно в коммерческих целях. Для высокой оценки в GooglePagespeed необходимо перенести все файлы скриптов и стилей в конец документа. Но при этом в процессе загрузки посетитель будет наблюдать странные вещи. Сайт будет выглядеть откровенно криво до тех пор, пока все эти скрипты не прогрузятся. Поэтому в таких случаях и используют подобные прелоадеры, которые собой закрывают весь тот "ужас", что отображается на странице. Но потом мы решили, что обманывать доверчивых пользователей - плохо. А хвастовство высокой оценкой в GooglePagespeed этим обманом и является. Во-первых, эта оценка ни на что не влияет, что бы там не говорили "мамины сеошники". Во-вторых, если перенести все скрипты в конец страницы, нарушится работа плагинов. Это вообще в большинстве случаев сломает функциональность всей страницы. Поэтому в итоге мы отказались от введения псевдополезной настройки "Ускорить сайт". И вы можете просто отключить этот прелоадер в настройках темы.
Наверное вы захотите спросить почему же мы оставили этот прелоадер, если отказались от перемещения скриптов в конец документа. Ну... он миленький.

Стили для этого прелоадера находятся непосредственно внутри <head> шаблона index.html:

    <style>
        .page-preloader {
            position: fixed;
            background-color: #fff;
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 20000;
        }
        .inner-loader {
            width: 32px;
            height: 32px;
            background: url({$wa_theme_url}img/preloader.gif) center center no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>

Ответить

Чтобы добавить комментарий, зарегистрируйтесь или войдите