Делаем полноценный JS-прелоадер для AJAX-приложения. Прелоадер с процентной загрузкой Как сделать прелоадер в виде пульсирующего логотипа
Привет, друзья. Бывает такое, что из-за использования тяжелых плагинов и сайт грузиться непозволительно долго. В таких случаях я рекомендую избавляться от них, либо искать менее «тяжелый» аналог. Но иногда — его просто нет. В таком случае можно попробовать использовать прелоадер, чтобы немного развлечь (отвлечь) пользователя. Но не все знают, как подобный функционал реализовать…
Первым делом стоит упомянуть, что использование прелоадера целесообразно в случаях, когда долго грузится главный экран или тогда, когда контент грузится кусками. Все это может привести либо к мгновенному уходу пользователя с сайта, либо к негативному впечатлению о компании вцелом.
Как сделать прелоадер для landing pageПрежде чем начать делать preloader, нужно немножко уяснить суть того, как браузер загружает страницу. Не буду расписывать весь цикл, так как у самого довольно абстрактное представление, но важно понять, что в целях экономии времени, браузер грузит (отображает) код поэтапно и не дожидается полной загрузки страницы, а в случае подключения js, так вообще прекращает загрузку, пока не выполнит подключаемый файл. Это значит, что загрузка (отображение) остального контента приостанавливается до полной загрузки js файла. В общем, проблем достаточно, давайте теперь попробуем их решить при помощи прелоадера.
Теперь пару слов для понимания того, что мы делаем:
- В самом начале размещаем div c прелоадером
- Скрываем прелодером содержимое сайта до момента полной загрузки страницы
- Скрываем прелоадер и показываем страницу
Теперь, сразу после открытия тега body разместим следующий div:
Скорее всего, если у вас проблемы с загрузкой сайта, значит у вас много качественных изображений и различных тяжеловесных скриптов, а значит, вы наверняка используете и jQuery, поэтому для того, чтобы наш preloader исчез после того, как загрузится основное содержимое, воспользуемся следующим скриптом:
$(window).on("load", function () { $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader.delay(350).fadeOut("slow"); });
Размещайте его где-нибудь после подключения jQuery.
Немного поясню html. LoaderArea — фоновая область, которая перекрывает основной контент. CSS этого дива такой:
LoaderArea { background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%); overflow: hidden; position: fixed; left: 0; top: 0; right:0; bottom:0; z-index: 100000; }
Loader — это активная область (сам прелоадер). Так как я решил делать его при помощи только CSS, то у него такие стили:
Loader { height: 40px; width: 40px; position: absolute; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; } .loader:before, .loader:after { content: ""; height: 40px; width: 40px; border: 8px solid rgba(255,255,255,.5); border-radius: 10px; position: absolute; top: 0; } .loader:before { animation: animate 2s infinite linear; } @keyframes animate { 0% { transform: rotate(0) skew(0); } 100% { transform: rotate(180deg) skew(360deg); } } .loader:after { animation: animate2 2s infinite linear; } @keyframes animate2 { 0% { transform: rotate(0) skew(0); } 100% { transform: rotate(-180deg) skew(-360deg); } }
Исходник прелоадера я взял с Codepeen. Вот ссылки на несколько интересных вариантов.
Доброго времени суток уважаемые подписчики, читатели и просто посетители нашего сайта! Начинаю этот материал я с новой ступени для себя отсчета, а точнее с 101 урока , который, надеюсь, Вам пригодится и понравится. Вообще, использование прелоадера для сайта широко известная тема среди разных анимации и эффектов, но я замечал, что многие из них, имеют очень громозкий и не удобный код, поэтому решил написать что то попроще и использовал для этого jQuery .
Рассматривая данный материал, хочу заметить, что исполнение данного кода работает каждый раз при обновлении страницы и если Вам потребуется это сделать при нажатии или загрузке страницы, можете написать в комментариях сайте, тогда сможем разобрать более детально данный материал.
И так, прежде чем приступить к изучению кода, я подготовил специально для Вас видеоматериал, с подробным ознакомлением данного урока, который Вы можете также посмотреть, если не хотите читать текст или вдруг у Вас возникли какие-либо вопросы.
Первый шаг. HTML.
Для начала, я решил сделать картинку, которая имеет разрешение GIF формата, что позволяет нам более эффективно использовать прелоадер для сайта. Данную картинку я загрузил в папку img , где и будет также лежать обычная картинка PNG , которая будет использоваться после загрузки страницы.
Теперь, нам стоит подключить необходимые стили и скрипты, чтобы данный код успешно отрабатывал. Подключаем библиотеку jquery.min.js , а также сам скрипт load.js , который и будет выполнять функцию прелоадера. Также не забываем про стили, которые у нас находятся в файле demo.css .
Далее создаем div блок с идентификатором load , который и будет взаимодействовать со скриптом и выполнять данный эффект. После создаем блочный контейнер, в нем размещаем картинку, нашей GIF анимации и чуть ниже выводим какой-то произвольный текст.
Завершаем HTML код простым выводом картинки PNG .
Второй шаг. jQuery.
Сам скрипт очень простой, не знаю нужны ли будут комментарии, но думаю все-таки напишу, чтобы было меньше вопросов. Ну, во-первых, скрипт работает в окне, который выполняет требования идентификатора load . Во-вторых, данному идентификатору присваивается задежка с помощью функции delay в 2500 мс , чтобы как раз таки и был виден данный эффект, после идет функция fadeOut со значением slow , что позволяет показывать нам сам сайт, после задержки. Все достаточно элементарно и просто, как видите.
$(window).on("load", function () { $("#load").delay(2500).fadeOut("slow"); });
Третий шаг. CSS.
Переходим к последнему шагу, в котором пропишем все необходимые стили для правильной работы скрипта. Сразу хочу отметить, что все свойства и значения (кроме, пожалуй, background , text-align ) идентификатора load и load div обязательны, иначе правильно у Вас ничего работать не будет.
Тогда я немного поразмыслив, решил, что нужно что-то, что скроет загрузку сайта, а покажет что-то в замен, а когда страница загрузится полностью, тогда уже будет показан посетителю в полном объеме. Поискав немного то что мне нужно, я скрестил несколько скриптов и немного добавил своего в стилях, я получил нужный мне результат. Теперь посетители посадочной страницы видят небольшую заставку, прежде чем увидят полностью загруженный контент. Скрипт работает таким образом, что он грузится в первую очередь и показывает то, что мы зададим в настройках, после загрузки страницы браузер вызывает событие window.onload и наш скрипт показывает загруженную страницу.
Выглядит это примерно так, чем дольше будет грузится страница, тем дольше будет показана заставка:
На свой сайт или страницу подключить такой прелоадер, можно довольно не сложно. Первое что понадобится сделать для осуществления задумки, это конечно же вставить HTML разметку. Сделать это можно, например в шапке сайта. Вставьте в любое место, лучше всего сразу после открывающего тега body . Это основной блок с ID p_prldr , который будет заполнять весь экран и внутри которого можно расположить что угодно, что увидит посетитель до полной загрузки страницы. Внутри этого блока разместим анимацию загрузки и текст.
#p_prldr{ position: fixed; left: 0; top: 0; right:0; bottom:0; background: #9A12B3; z-index: 30;} .contpre small{font-size:25px;} .contpre{ width: 250px; height: 100px; position: absolute; left: 50%;top: 48%; margin-left:-125px; margin-top:-75px; color:#fff; font-size:40px; letter-spacing:-2px; text-align:center; line-height:35px;} #p_prldr .svg_anm { position: absolute; width: 41px; height: 41px; background: url(images/oval.svg) center center no-repeat; background-size:41px; margin: -16px 0 0 -16px;}
Блок с классом svg_anm , это наша анимация. В своем прелоадере я использую SVG графику для анимации. Ее можно масштабировать до нужных мне размеров и выглядит она реалистично и прикольно. Если хотите, можете использовать какую-то GIF анимацию или просто статичную картинку, все зависит от Вашей фантазии. У меня это файл oval.svg его размер я установил параметром background-size:41px; , также нужно указать ширину и высоту блока равную размерам анимации. width: 41px; height: 41px;
Если Вам тоже по душе такая анимация, можете выбрать из ниже приведенных, для этого правой кнопкой миши щелкните по нужной и сохраните в нужную папку.
Ну и сами анимации.
Фон анимации установлен вручную и он будет у Вас как в основном блоке прелоадера, сама анимация белая, так что если откроете ее после скачивания, то ничего не увидите 🙂 Чтобы потом не писали, что не работает.
Чтобы все заработало, нужно добавить сам скрипт прелоадера, но для начала Вы должны убедится, что у Вас подключена библиотека jQuery . Если это не сделано то в шапку перед закрывающимся head или в подвал перед закрывающимсяbody добавляем такую строку:
После нее, вставляем уже сам скрипт.
$(window).on("load", function () { var $preloader = $("#p_prldr"), $svg_anm = $preloader.find(".svg_anm"); $svg_anm.fadeOut(); $preloader.delay(500).fadeOut("slow"); });
Если Вы не меняли айди главного блока и класс блока с анимацией, то в скрипте менять ничего не надо. Можно только настроить одну вещь, а именно задержку перед показом страницы. Когда страница загрузится, блок с анимацией исчезнет и плавно появится содержимое страницы, но можно установить еще задержку. В данном скрипте она равна 500 миллисекундам то есть пол секунды, можете уменьшить или наоборот увеличить если Вам это нужно.
Все сделано правильно и результат должен порадовать Вас. Главное не спешите и внимательно выполните инструкцию.
На этом все, спасибо за внимание. 🙂
В зависимости от типа веб-ресурса и объема информации на нем, загрузка сайта может занять от нескольких миллисекунд до пары секунд. В процессе загрузки с сайтом может происходить множество вещей: верстка может прыгать в разные стороны, текст может менять начертание. Возникает вполне закономерное желание спрятать всю эту вакханалию подальше от глаз посетителей. Для этого и предназначены прелоадеры.
Прелоадер — это индикатор загрузки сайта. Он может быть выполнен как в виде анимированного 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 градусов.
