Preloader и способ его реализации с помощью jQuery

Preloader (прелоадер) – это важный элемент пользовательского интерфейса, который предназначен для скрытия процесса загрузки сайта и возникающих в связи с этим нежелательных визуальных артефактов. Реализовать CSS preloader в принципе несложно – главное правильно загрузить код скрипта и необходимые ему стили.

Зачем нужен Preloader

Баланс между скоростью загрузки сайта и эстетичной прогрузкой его элементов – большая головная боль для любого вебмастера. При создании прототипа и переносе на него дизайна на скорость особого внимания не обращаешь, хотя бы потому, что разработка препродакшена часто идет на “локалке”. 

Когда же начинается оптимизация кода скриптов и стилей, сразу же возникает требование грузить их “внизу”, т. е. после разметки. Это позволяет ускорить общую загрузку сайта, поскольку DOM уже доступен, а весь вспомогательный код подтянется настолько быстро, насколько позволит производительность вашего хостинга.

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

Preloader (прелоад или предзагрузчик) и есть тот самый функционал, который позволяет до момента загрузки окна – событие .load() – скрыть нестилизованную разметку и вывести для пользователя некий эстетичный индикатор. Таким образом, мы дадим ему понять, что с сайтом все в порядке, просто надо немного подождать.

Идея, в принципе, не нова: в сети есть достаточно материалов и по стилизации и по скриптованию прелоадера. Есть даже ресурсы, с которых можно скачать анимированные индикаторы – loaders и spinners.

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

Как реализовать Preloader

Теперь, когда понятен общий принцип, можно приступать к реализации. Алгоритм будет следующий:

1. Сразу же после обращения к странице вывести preloader, который скроет процесс загрузки DOM и релевантного контента (картинки).
2. После прогрузки окна убрать preloader и удалить его из DOM.

Начнем с HTML-кода. Он будет простым:

<div id="preloader"></div>

Если по семантическим соображениям пустой элемент вам не подойдет, можно и так:

<div id="preloader">Добро пожаловать!</div>

Разместить его необходимо как можно выше, сразу после открывающего тега body.

Теперь нам необходимо сделать так, чтобы наш элемент закрыл все окно. Стили будут несложными:

div#preloader { 
	background: #fff; 
	position: fixed; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	z-index: 9999; 
	// Скрываем текст
	text-indent: -9999px;
}

Следующий этап – реализация индикатора. Как я уже говорил, нам не понадобятся сторонние изображения. Все сделаем с помощью CSS и псевдоэлемента ::after.

div#preloader { 
	text-indent: -9999px;
	background: #fff; 
	position: fixed; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	z-index: 9999; 
}

div#preloader::after { 
	content: ''; 
	height: 48px; 
	width: 48px; 
	border: 5px solid transparent; 
	border-bottom-color: red; 
	border-radius: 50%; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	animation: rotation 1s linear infinite; 
}

@keyframes rotation {
	0%		{ transform: rotate(0deg); }
	100%	{ transform: rotate(360deg); }
}

Для наглядности того, как формируется спиннер:

Для центрирования нашего CSS спиннера используем стандартный трюк, основанный на свойствах position и transform:

...
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);
...

Разместим наши стили в отдельном CSS-файле и подключим его самым первым в контейнере head:

<link href="css/preloader.css" type="text/css" rel="stylesheet" />

Теперь, когда все готово, займемся скриптом. Он тоже будет простым:

preloader = $('div#preloader');

$(window).on('load', function() {
  preloader.fadeOut(200, function() {
    preloader.remove();
  });
});

В принципе, можно и не удалять код нашего прелоадера, поскольку после того, как отработает анимация функции fadeOut() (значение opacity станет 0), его CSS-свойство display получит значение none, и мешать он нам уже не будет.

Подключить наш скрипт необходимо в виде отдельного JS-файла и самым последним, перед закрывающим  тегом body. Никаких DOM-элементов после него не должно быть, иначе выполнение будет невозможно, и preloader никогда не исчезнет.

Поскольку мы использовали jQuery-код, убедитесь, что перед нашим скриптом загружена библиотека:

...
<script src="js/jquery.min.js"></script>
<script src="js/preloader.js"></script>
</body>
</html>

Поклонникам “ванильного” JavaScript приведу вариант без использования jQuery:

preloader = document.querySelector('div#preloader');

document.querySelector(window).on('load', function() {
  preloader.fadeOut(200, function() {
    preloader.remove();
  });
});

Осталось только протестировать работу прелоадера и убедиться в том, что все работает правильно.

Заключение

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

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