Прелоадер для сайта: подробно о трех способах создания

С момента запроса страницы веб-сайта до ее полной загрузки нужно некоторое время. В течение этого времени страница не готова к взаимодействию с пользователем: дизайн еще не отрисовался, выглядит непривлекательным и малопонятным, js-скрипты не загружены и не способны выполнять интерактивные задачи. Чтобы дать понять посетителю, что ресурс находится в стадии загрузки, на многие сайты добавляют прелоадер (лоадер). В этой статье вы узнаете, что такое прелоадер и как он работает, а также научитесь создавать этот функциональный элемент самостоятельно.

Содержание

Что такое прелоадер и его основные задачи
Как сделать прелоадер для сайта
Прелоадер с изображением формата GIF
Прелоадер с изображением формата SVG
Прелоадер на CSS

Что такое прелоадер и его основные задачи

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

Живые примеры прелоадеров вы сможете увидеть прямо на сайте автора в тексте статьи, нажимая на кнопки «Запустить прелоадер».

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

Основные задачи:

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

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

Прелоадер делает общение пользователя с веб-ресурсом более понятным. И в целом посетители довольно положительно реагируют на наличие этого элемента.

Какие проблемы могут возникнуть при отсутствии прелоадера?

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

Еще один пример: на сайте размещена форма, работающая с AJAX. Вы заполняете данные и отправляете, нажав на кнопку отправки формы. Пока запрос обрабатывается сервером, на лицевой части сайта не происходит никаких изменений — непонятно, отправилась ли форма или нет. Если добавить прелоадер, то сразу станет ясно, что форма отправлена и необходимо немного подождать результата.

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

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

В создании прелоадера можно выделить три этапа:

подготовка анимационного изображения;
верстка покрывающего фона;
создание логики появления и исчезания с помощью определенных JavaScript-событий.

Сложность первого этапа зависит от выбора формата анимации для прелоадера. В этой статье разберем три формата:

Прелоадер с изображением формата GIF

Подготовка анимации GIF требует немного времени — ее можно просто найти и скачать на соответствующих сайтах, которых на просторах интернета множество. Например, на ресурсе https://loading.io/. Если вам не нужен прелоадер конкретного дизайна, такой метод будет вам подходящим. Еще одним преимуществом такого подхода является то, что GIF-анимация хорошо поддерживается старыми браузерами.

Для нашего примера возьмем следующую готовую GIF-анимацию:

Теперь перейдем ко второму этапу — созданию покрывающего фона. HTML-структура будет очень простой. Она будет состоять из блока с классом и идентификатором, внутри этого блока с помощью тега img подключим файл прелоадера, указав путь к нему:

HTML:

<div class='demoPreloader' id='demoPreloader'>
    <img src='/path/to/preloader.gif' alt='preloader'>
</div>

Теперь сделаем стилизацию фона:

Зададим ему белый цвет с непрозрачностью 70% (background)
Установим позиционирование относительно всего экрана (position)
Растянем фон на весь экран, задав стопроцентную ширину и высоту от левого верхнего угла (top, left, width, height)
Сделаем фон самым верхним слоем по оси z на странице, чтобы он блокировал все содержимое. Для этого добавим свойство z-index с большим числом (число должно быть больше, чем у других элементов страницы)
Отцентрируем нашу GIF-анимацию с помощью flex.

CSS:

.demoPreloader {
    background: rgba(255, 255, 255, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

Верстка прелоадера готова. Последним этапом зададим логику появление и исчезания прелоадера посредством JavaScript. Если мы хотим, чтобы прелоадер работал при открытии страницы, мы будем использовать событие JS, которое наступает после полной загрузки страницы:

JavaScript:

window.onload = function() {
    // Спрячем прелоадер после загрузки страницы
    document.querySelector('#demoPreloader').style.display = 'none';
};

С помощью библиотеки jQuery это можно сделать проще и еще добавить скорость исчезновения:

jQuery(document).ready(function($) {
    // Прелоадер будет исчезать со скоростью полсекунды (500 мс)
    $('#demoPreloader').fadeOut(500);
});

Чтобы увидеть результат, нажмите на кнопку:

Несмотря на свою простоту и хорошую поддержку старых браузеров, готовые GIF-анимации для прелоадера уступают по своим преимуществам анимациям, созданным с помощью SVG и CSS. Далее рассмотрим эти два альтернативных способа подготовки анимационных изображений.

Прелоадер с изображением формата SVG

В отличие от анимации формата GIF, SVG имеет ряд преимуществ:

не требует дополнительного http-запроса (чем меньше запросов, тем лучше производительность сайта);
кастомизируема — можно изменять код SVG на свой вкус;
масштабируема — на высоких разрешениях экрана не будет выглядеть размытым.

Нарисуем несложную SVG-анимацию в виде трех двигающихся вверх-вниз прямоугольников разного цвета. HTML-код вместе с покрывающим фоном будет выглядеть так:

<div class='demoPreloader' id='demoPreloader'>
    <svg width='65px' height='50px' viewBox='0 0 65 50'>
        <rect x='0' y='0' width='15' height='40' fill='#1d0e0b'>
          <animate attributeName='y' values='0;10;0' dur='1s' repeatCount='indefinite' begin='0s'></animate>
        </rect>
        <rect x='25' y='0' width='15' height='40' fill='#774023'>
          <animate attributeName='y' values='0;10;0' dur='1s' repeatCount='indefinite' begin='0.2s'></animate>
        </rect>
        <rect x='50' y='0' width='15' height='40' fill='#d88c51'>
          <animate attributeName='y' values='0;10;0' dur='1s' repeatCount='indefinite' begin='0.4s'></animate>
        </rect>
    </svg>
</div>

Что мы сделали:

задали ширину, высоту тега svg помощью атрибутов width и height, а также размеры и расположения окна отображения, используя атрибут viewBox;
создали три вертикальных прямоугольника (тег rect), установив им ширину (width), высоту (height), координаты левого верхнего угла (x, y) и залив каждый прямоугольник отдельным цветом (fill);
добавили анимацию (тег animate) для прямоугольников (смещение по вертикали (attributeName='y') бесконечно (repeatCount='indefinite') со скоростью 1 секунда (dur='1s' ) от координаты 0 до 10 и обратно (values));
чтобы прямоугольники двигались по очереди, установили каждому из них разное время начала анимации (begin).

Поэкспериментируйте с различными параметрами этой SVG-анимации: поменяйте цвет, размеры, скорость на свое усмотрение.

Мы только заменили GIF на SVG — изменения в CSS и JavaScript не требуются. Оцените результат, нажав на кнопку:

Прелоадер на CSS

Помимо двух вышеупомянутых вариантов, существует также возможность создавать анимацию прелоадера, используя CSS. Опишем пример такого прелоадера.