Как сделать прелоадер в виде пульсирующего логотипа. Делаем полноценный JS-прелоадер для AJAX-приложения

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

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

Это и будет общей концепцией данного скрипта.

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

При выключенном кэшировании мы получаем картинки, но прогресс бар еще отрабатывает. Если делаем тротлинг на 3G то все тут меняется, картинки еще не все прогрузились, а прогресс бар заполнен на 100% и ждет загрузки страницы до конца.

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

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

Возвращаемся к скрипту, вверху инициализируем несколько переменных.

Перемещаем на самый верх переменную preloader = $("#preloader") , при помощи которой скрываем данный идентификатор. Ей воспользуемся чуть позже.

Preloader = $("#preloader"), // селектор прелоадера

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

// $(window).on("load", function () { // $preloader.delay(1800).fadeOut("slow"); // });

Используем библиотеку jQuery для обращения к объектам картинок. Воспользуемся функцией length при помощи, которой узнаем количество изображений на странице, полученный результат помещаем в переменную imagesCount .

ImagesCount = $("img").length, // количество изображений

Ниже сделаем проверку, где в консоли выведем данный результат.

Console.log(imagesCount);

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

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

Percent = 100 / imagesCount; //количество % на одну картинку console.log(percent);

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

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

}).circularProgress("animate", percent , 1000 );

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

Для этого создаем цикл, где I это переменная счетчика, далее пишем условие, пока I меньше количество изображений, будем увеличивать счетчик на единицу var i = 0; i < imagesCount; i++ , и в скобках выполнять следующие действия.

Создаем переменную, в которую помещаем экземпляр объекта Image (то есть картинку), далее делаем копию src .

Браузер позволяет отслеживать загрузку внешних ресурсов – скриптов, картинок при помощи события – если при загрузке произошла ошибка.

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

А второй строкой вызываем событие onerror, если вдруг произошла ошибка не загрузилось изображение.

For (var i = 0; i < imagesCount; i++){ // создаем клон изображений var img_copy = new Image(); img_copy.src = document.images[i].src; img_copy.onload = img_load; img_copy.onerror = img_load; }

Ниже описываем функцию которая запускает прелоадер и добавляет процент, пишем function img_load() внутри к прогрессу загрузки прибавлять процент который нам известен. Для этого создаем еще одну переменную с нулевым значением, назовем ее progress .

Progress = 0; // точка отсчета

И тут же создаем еще одну переменную назовем loadedImg с нулевым значением. Она же будет счетчиком, по которому проводим сравнения с количеством клонированных изображений.

LoadedImg = 0, // счетчик загрузки картинок

Возвращаемся в функцию, в нутрии делаем сложения progress += percent , а результат сохраняем в progress . Второй строкой, увеличиваем счетчик loadedImg++ на единицу.

Далее пишем условие, если progress больше либо равен 100 (где 100 это общее количество процентов) или счетчик loadedImg равен количеству загруженных изображений imagesCount , тогда можно удалить прогресс бар preloader.delay(400).fadeOut("slow"); , иначе вызываем прогресс бар, где увеличим прогресс, и скорость загрузки уменьшаем до 500.

Function img_load() { progress += percent; loadedImg++; if (progress >= 100 || loadedImg == imagesCount){ preloader.delay(400).fadeOut("slow"); qBody.css("overflow", ""); } $(".dws-progress-bar").circularProgress("animate", progress, 500); }

Через консоль проверим как создаются новые объекты изображений.

Console.log(img_copy); console.log(img_copy.src);

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

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

Для этого все обернем в условие, если количество изображений больше нуля imagesCount > 0 тогда будем выполнять данный скрипт, иначе удаляем прелоадер preloader.remove(); . Если условие прошли, прелоайдеру добавляем черный фон preloader.css("background", "#000"); , а в css данный стиль удалим.

If (imagesCount >= imgSum && imagesCount > 0) { preloader.css("background", "#000"); } else { preloader.remove(); }

Инициализируем еще одну переменную, в которую помещаем селектор qBody = $("body") , и в условии прописываем для селектора body блокировку прокрутки qBody.css("overflow", "hidden"); .

QBody.css("overflow", "hidden");

Теперь нужно прокрутку разблокировать, для этого когда прелоадер будем удалять, то для body очищаем блокировку qBody.css("overflow", ""); .

QBody.css("overflow", "");

Убираем служебный вывод информации в консоли, и сохраняемся.

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

В условии допишем, если количество картинок будет больше, либо равно нашей переменной (imagesCount >= imgSum && imagesCount > 0) тогда выполняем условии, иначе удаляем прелоадер. Тем самым при помощи данной переменной imgSum можем задавать загрузку прелоадера при определенном количестве изображений.

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

global_settings.percent = (global_settings.percent > 100) ? 100: global_settings.percent;

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

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

Урок подготовил Горелов Денис.

Тогда я немного поразмыслив, решил, что нужно что-то, что скроет загрузку сайта, а покажет что-то в замен, а когда страница загрузится полностью, тогда уже будет показан посетителю в полном объеме. Поискав немного то что мне нужно, я скрестил несколько скриптов и немного добавил своего в стилях, я получил нужный мне результат. Теперь посетители посадочной страницы видят небольшую заставку, прежде чем увидят полностью загруженный контент. Скрипт работает таким образом, что он грузится в первую очередь и показывает то, что мы зададим в настройках, после загрузки страницы браузер вызывает событие 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 миллисекундам то есть пол секунды, можете уменьшить или наоборот увеличить если Вам это нужно.

Все сделано правильно и результат должен порадовать Вас. Главное не спешите и внимательно выполните инструкцию.

На этом все, спасибо за внимание. 🙂

Привет, друзья. Бывает такое, что из-за использования тяжелых плагинов и сайт грузиться непозволительно долго. В таких случаях я рекомендую избавляться от них, либо искать менее «тяжелый» аналог. Но иногда — его просто нет. В таком случае можно попробовать использовать прелоадер, чтобы немного развлечь (отвлечь) пользователя. Но не все знают, как подобный функционал реализовать…

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

Прежде чем начать делать 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. Вот ссылки на несколько интересных вариантов.

Многие программисты оптимизируют JavaScript и CSS-код, чтобы страница грузилась быстрее.
Но не все они делают прелоадеры, которые дают пользователю эффект субъективно более быстрой загрузки.

Способ №1. Дешево и сердито.
Идея проста - необходимо поместить по центру картинку, которая будет показывать пользователю, что страница все еще загружается. Код довольно прост, пишем сразу после :

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

Потом, когда все загрузилось - нужно убрать прелоадер и установить overflow в положение visible.

Эту часть кода я поместил в файл с JS-функциями, plreloader1.js

Если делать прогрессбар из анимированного GIF-рисунка, то он может получиться слишком тяжелым, порой даже больше самой странички, где его размещают.
Поэтому лучше нарисовать полоску (например, такую), поставить ее как фон у блока с ID preloader и двигать бекграунд-позишн по таймеру.

И после загрузки делаем вот что:

Результат работы можно посмотреть .

У этого способа есть недостатки — Если ставить скрытие прелоадера на onload, т.е. когда ждать, пока загрузятся все картинки, то пользователь может подумать, что страница просто зависла - фактически кроме анимации ничего не происходит. Если же вешать на $(document).ready() из jQuery, то после исчезновения прелоадера картинки только будут подгружаться.

Поэтому предлагается использовать…

Способ №2. Истина где-то рядом, или джедаи наносят ответный удар.
Для начала нарисуем 2 полосы загрузки - активную и не очень.

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

Progbar_ph.gif – это картинка высотой в 1 пиксель и шириной с нашу полосу прокрутки (данный пример глючит без нее в IE, и я пока не нашел другого способа выровнять по центру див с прогрессбаром).
Стили такие же, как и в предыдущем способе, разве что

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

Возьмем средний сайт, сделанный полностью на AJAX. Загрузка примерно происходит так:

• грузится HTML-код
• начинают грузиться картинки
• затем некий фреймворк
• дополнительные JS-файлы (хотя лучше все склеить в один)
• запускается некая функция (или несколько), которая стягивает дополнительный контент.

Я реализовал 2 метода - первый простой, включается так:
непосредственно перед пишем:

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

Скрипт сканирует все картинки на страницы и назначает им вес равный 1. Все JS-файлы прописываются в его теле, как я расскажу чуть ниже.
Однако хочется, чтобы вес у каждой единицы контента был не единицей, а реальным объемом в байтах. Да и для AJAX-приложений хотелось бы сразу подгрузить всю графику.

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

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

Когда загрузились все JS-файлы, запускаются функции, которые есть в массиве invoke. Если мы с помощью jQuery подгружаем контент, то функция будет выглядить так:

PHP-скрипт делает следующее: он заносит в массив необходимые скрипты с их размерами, а так же картинки и дополнительные функции. Код:

Уже после того, как загрузились все картинки и JS-файлы, вызывается событие onLoad, которое вы указали в функции dLoader.start()

Еще есть способ кастомизации процесса загрузки.

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

Для этого используют анимированные прелоадеры.

Мы выбрали для вас 20 интересных прелоадеров, выполненных с помощью CSS3 и HTML5 или JQuery. Они способны заметно улучшить пользовательский опыт.

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

Вот простые и элегантные загрузчики, выполненные при помощи CSS. Могут легко стать частью любого веб-проекта – просто скопируйте и вставьте код.

А это – сочный прелоадер в виде радуги, создан на CSS. Подойдет для ярких, динамичных, молодежных проектов!

А этот индикатор загрузки хорошо подойдет для сайтов с карточным дизайном.

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

Динамическая анимация – разноцветные блоки, которые приводит в движение небольшой шарик.

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

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

Только два цвета и простые фигуры. Но какая интересная анимация! Этот прелоадер украсит любой ваш сайт.

Этот прелоадер идеально подходит для динамичных проектов со стильным, минималистским дизайном.

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

И эта картинка из разряда «не могу оторвать взгляд». Просто завораживает, и гарантировано скрасит время ожидания загрузки для ваших пользователей.

Если вы ищете индикаторы загрузки, как на Tumblr, обратите внимание на эти! Анимация на основе CSS, с использованием SVG иконок.

А это круговые интерактивные CSS3 прелоадеры. Наведите курсор мыши на отдельные участки и посмотрите на интересный эффект.

Простая и элегантная анимация в пастельных тонах. Идеальна для сайтов женской тематики.

А в этом комплекте вы можете выбрать анимацию загрузки на свой вкус. Будут это часики или просто белые кружки?

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

А здесь целая коллекция анимированных загрузчиков. Есть из чего выбрать, и все легко интегрируются в любой сайт.

Интересный прелоадер с кругами. Они то перестраиваются в треугольник, то в пунктирную линию.

Еще одна коллекция индикаторов, с различной анимацией. Все прелоадеры – в форме круга.

Эта анимация может быть наложена на текстовый логотип или любой текст – например, на название компании, или ее слоган.

Надеемся, что-то из этой коллекции пригодится вам в работе над следующим проектом!