В зависимости от типа веб-ресурса и объема информации на нем, загрузка сайта может занять от нескольких миллисекунд до пары секунд. В процессе загрузки с сайтом может происходить множество вещей: верстка может прыгать в разные стороны, текст может менять начертание. Возникает вполне закономерное желание спрятать всю эту вакханалию подальше от глаз посетителей. Для этого и предназначены прелоадеры.
Прелоадер — это индикатор загрузки сайта. Он может быть выполнен как в виде анимированного gif-изображения, так и в виде шкалы загрузки. Но независимо от внешнего вида прелоадера, принцип его работы будет одним и тем же: как можно раньше показать пользователю индикатор загрузки, а по окончании загрузки этот индикатор скрыть.
Как загружается веб-страницаПрежде чем создать индикатор какого бы то ни было процесса, нужно разобраться в самом процессе. Загрузка веб-страниц — не исключение. Итак, как же загружается веб-страница?
Теперь, понимая порядок загрузки веб-страницы, можно сформировать для себя список задач и условий для нашего прелоадера. Мои условия для него таковы:
- Должен отображаться как можно раньше, закрывая собой весь контент.
- По возможности, отображение не должно зависеть от внешних ресурсов.
- Должен скрываться, как только загрузка страницы полностью завершена. Для скрытия можно использовать любую доступную javascript-библиотеку.
Если ваша страница практически не зависит от графики, то вместо window.onload для скрытия прелоадера можно использовать DOM Ready .
Для решения первой задачи поместим следующий html-код сразу после открывающего тега body:
Для нашего прелоадера нам понадобятся стили, но зависить от внешних файлов мы не хотим, поэтому разместим стили прямо в документе, где-нибудь внутри head:
#page-preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 100500; } #page-preloader .spinner { width: 32px; height: 32px; position: absolute; left: 50%; top: 50%; background: url("/images/spinner.gif") no-repeat 50% 50%; margin: -16px 0 0 -16px; }
К сожалению, полностью отказаться от внешних ресурсов у меня не выйдет, ведь нам нужно анимированное gif-изображение. Но, учитывая небольшой размер самого изображения, это допустимая жертва.
Теперь осталось только скрыть наш прелоадер после загрузки страницы. Здесь мы уже не ограничены в средствах, поэтому можем использовать jQuery:
$(window).on("load", function () { var $preloader = $("#page-preloader"), $spinner = $preloader.find(".spinner"); $spinner.fadeOut(); $preloader.delay(350).fadeOut("slow"); });
Готово! Теперь вместо скачущей в разные стороны верстки посетитель во время загрузки страницы будет видеть наш аккуратный экран загрузки. А работающую версию такого прелоадера можно увидеть на сайте
Использовать или нет на сайте прелоадер - вопрос индивидуальный. Например для одностраничника, с минимальным количеством графики и изображений, такая штука не нужна.
Рассмотрим другую крайность - сайт для заказа пиццы. Большая часть посетителей заказывают пиццу с мобильника - а это более медленная скорость загрузки сайта в принципе и плюс фотографии. Прелоадер для таких сайтов будет весьма кстати, посетители не будут видеть неприглядный процесс формирования страницы.
Сейчас мы создадим классический вращающийся прелоадер на чистом 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 внутри реального круга, в диаметре на 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;
Пришло время запускать наши круги, делает это свойство 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