Что такое прелоадер. Делаем полноценный JS-прелоадер для AJAX-приложения. Дополняем функционалом прелоадер

Урок, на котором рассмотрим процесс создания прелоадера для страницы (preload page). В качестве прелоадера будем использовать иконку Font Awesome или анимированное изображение gif, которое будет отображаться во время загрузки страницы.

Как сделать прелоадер для сайта

Страница любого веб-сайта при её открытии не загружается мгновенно. На загрузку и отображение страницы тратиться некоторое время, которое может составлять от 1 до нескольких секунд. Чтобы данный процесс (т.е. процесс загрузки страницы) как-то сгладить для пользователя, ему на это время можно показать анимированное изображение или иконку.

Процесс создания прелоадера довольно прост и заключается в том, что нам необходимо показать некоторый блок (#before-load), содержащий анимированное изображение или иконку, сразу после открытия страницы сайта. А после того как загрузка страницы полностью завершиться, этот блок (#before-load) с анимированным изображением gif или иконкой необходимо скрыть от пользователя.

Создание прелоадера для страницы

Разработку прелоадера, который будет выглядеть как белый фон с анимированной иконкой, выполним за 3 шага:

1. Создадим HTML-код, состоящий из блока и иконки Font Awesome. Этот кусок кода необходимо разместить в документе таким образом, чтобы он отобразился пользователю первым, т.е. сразу после открывающего тега body:

2. Создадим стили CSS для блока div и элемента i (иконки).

#before-load { position: fixed; /*фиксированное положение блока*/ left: 0; /*положение элемента слева*/ top: 0; /*положение элемента сверху*/ right: 0; /*положение элемента справа*/ bottom: 0; /*положение элемента снизу*/ background: #fff; /*цвет заднего фона блока*/ z-index: 1001; /*располагаем его над всеми элементами на странице*/ } #before-load i { font-size: 70px; /*размер иконки*/ position: absolute; /*положение абсолютное, позиционируется относительно его ближайшего предка*/ left: 50%; /*слева 50% от ширины родительского блока*/ top: 50%; /*сверху 50% от высоты родительского блока*/ margin: -35px 0 0 -35px; /*смещение иконки, чтобы она располагалась по центру*/ } 3. Добавим сценарий, скрывающий прелодер после загрузки страницы (т.е. когда произойдёт load у объекта window): $(window).load(function() { $("#before-load").find("i").fadeOut().end().delay(400).fadeOut("slow"); });

Если Вы хотите использовать в качестве индикатора прелоадера анимированное изображение gif, то необходимо произвести на вышепредставленных этапах следующие изменения:

В HTML-коде убрать классы Font Awesome:

В стилях CSS произвести следующие изменения (изменить правило #before-load i {..}):

#before-load i { width: 70px; /*ширина gif-изображения*/ height: 70px; /*высота gif-изображения*/ position: absolute; left: 50%; top: 50%; background: url("assets/images/img.gif") no-repeat 50% 50%; /*расположение (url) изображения gif и др. параметры*/ margin: -35px 0 0 -35px; }

Скачать анимированные gif-изображения для Вашего сайта можно с ресурса http://preloaders.net/ или восвпользоваться этим архивом .

Сегодня будем говорить о том, как скрыть загрузку сайта на WordPress с помощью прелоадера. Все мы видели такие сайты, на которых вместо белого экрана загрузки выводиться анимированное изображение. Этот маленький трюк может помочь в том случае, если у вас медленно грузиться сайт, но вы все же хотите удержать нетерпеливых пользователей, которые не любят по долгу смотреть на пустой белый экран монитора. Ну что поехали добавлять прелоадер для сайта WordPress

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

Что такое прелоадер (preloader)

Прелоадер - это механизм вывода анимации или индикатора загрузки, до полной обработки веб страницы и вывода ее на экран. Другими словами, пока страница сайта обрабатывается и загружается браузером, на экран выводиться анимация, которая заменяет пустой экран.

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

По статистике если сайт грузиться более 4 секунд, возникает большая вероятность отказа. Пользователь может покинуть сайт так и не дождавшись полной загрузки, а это очень плохой показатель. При нормальной оптимизации, не идеальной, но все же, мой сайт грузиться за 2-3 секунды и этот показатель вполне устраивает меня, и как показывает статистика пользователей тоже. По этому еще раз говорю о том, при медленной загрузке сайта нужна оптимизация, а не прелоадер.

После небольшого предисловия вернемся к нашим «баранам». Установим и настроем плагин.

Плагин The Preloader, обзор и настройка

Самый адекватный и бесплатный плагин прелоадер, который я нашел это плагин с уникальным названием - Прелоадер. Да вот так, никаких неожиданностей. Дело в том, что при поиске плагина в библиотеке wordpress.org, вы его не найдете. Нужно в строку поиска писать the preloader. Как устанавливать плагин можно узнать . Выглядит он так:

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

Итак, все настройки в коротком списке:

• Первой строчкой настройки является цвет заднего фона прелоадера, по умолчанию он белый (#FFFFFF). Вы можете задать интересующий вас параметр.
• Второе, это место размещение gif анимации, ее можно будет поменять на любую, нужно только учитывать размер 128х128 пикселей. По предложенной в настройках ссылке вы можете скачать интересующую вас анимацию.
• Следующим шагом будет выбор директорий где будет подгружаться прелоадер. Можно установить загрузчик на категории, на весь сайт, отдельно на страницы меток, или только на главную, вам решать.
• Последнее что вам нужно сделать это открывать файл header.php в папке вашей активной темы и добавить сразу после открывающегося тега предложенный див ().
• Если плагин активен, тогда вы сможете уже убедиться в работоспособности плагина.

Стоит еще заметить что при смене GIFки ее название должно быть preloader, и такая анимация в папке плагина image должна быть только одна.

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

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

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

Сейчас мы создадим классический вращающийся прелоадер на чистом CSS с применением свойств анимации.

Создадим простенький HTML-код , состоящий из одного пустого тега div с классом loader , не считая конечно тега body .

В файле стилей пропишем весь остальной код. Начало будет напоминать школьный урок геометрии - знакомсво с фигурами.

Стили для класса loader

Сначала нарисуем квадрат серого цвета сплошной линией толщиной в 2 пикселя:

Loader {
border: 2px solid #eae4ea;
}

с шириной и высотой по 150 пикселей:

Loader {
width: 150px;
height: 150px;
}

Всего одной строчкой кода квадрат стал кругом:

Border-radius: 50%;

У круга создадим полупрозрачную тень:

Box-shadow: 0 -2px 2px rgba(0,0,0,.2);

А нижнюю рамку покрасим в зеленый цвет:

Border-bottom: 2px solid #6ddfca;

Придумываем свое название анимации, один полный оборот круг сделает равномерно за 3 секунды, крутясь бесконечно, пока не загрузится страница.

Animation: loader 3s linear infinite;

Псевдоэлементы:before и:after

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

Рисуем внутренний псевдокруг before внутри реального круга, в диаметре на 20 пикселей (10px+10px) меньше

Loader:before {
content: "";
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}

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

Loader:before {
border-bottom: 2px solid #d355be;
animation: loader 2s linear infinite;
}

Теперь дело за after кругом, он хоть и самый маленький, но зато самый шустрый, з 1 секунду сделает полный поворот и полосочка у него красивая - фиолетовая.

Loader:after {
border-bottom: 2px solid #8c23ec;
animation: loader 1s linear infinite;
}

Отступы after круга от основного круга - 22 пикселя.

Top: 22px;
left: 22px;
bottom: 22px;
right: 22px;

Анимация по кадрам @keyframes

Пришло время запускать наши круги, делает это свойство transform: rotate - что значит поворот. 0% - старт, а 100% - финиш. Каждый круг повернется на 360 градусов.

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

Как же сделать прелоадер для сайта?

Сам прелоадер можно сделать всего за пару секунд, если использовать готовые решения или же за пару минут, если писать все самому с чистого листа:)

Но давайте все по порядку...

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

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

Краткая схема работы прелоадера:

• Буквально сразу после открывающегося тега body размещаем div c прелоадером;
• Включаем прелоадер и скрываем все содержимое страницы;
• После загрузки страницы убираем preloader и показываем сайт.

Теперь разберемся с кодом. Изначально вам надо поместить div с прелоадером, что-то вроде этого:

AreaForLoader { background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%); overflow: hidden; position: fixed; left: 0; top: 0; right:0; bottom:0; z-index: 9999; }

Последним делом вам надо скрывать прелоадер. Для этого можно воспользоваться следующим кодом на jQuery :

$(window).on("load", function () { $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader.delay(350).fadeOut("slow"); });

По сути вам только остается добавить какую-нибудь красивую анимацию к вашим прелоадерам. Кроме того, я нашел несколько интересных примеров прелоадеров, так что вы можете их глянуть:

Создание прелоадера при помощи плагинов

Также существуют и другие способы создания прелоадеров и полос загрузки. К примеру, вы можете воспользоваться специальным плагином NProgress.js для создания красивой полосы загрузки или же воспользоваться конструктором прелоадеров .

Как раз об этих двух вещах отлично рассказано в видео уроке по созданию прелоадера, поэтому советую вам посмотреть этот видео урок:

Preloader $(document).ready (function () { NProgress.start (); NProgress.set (0.4); setTimeout(function () { NProgress.done (); }, 4000); }); #hellopreloader>p{display:none;}#hellopreloader_preload{display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;background: #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) center center no-repeat;background-size:131px;}

Hello-Site.ru. Бесплатный конструктор сайтов.

var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity