Делаем полноценный 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. Вот ссылки на несколько интересных вариантов.
Многие программисты оптимизируют 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 метода - первый простой, включается так:
непосредственно перед пишем:
dLoader.start("progbarfg" , 333, "count" );
Первым параметром идет идентификатор блока с активной полосой загрузки в качестве фона, вторым - ширина картинки, третий параметр - это метод, которым будем считать вес контента.
Скрипт сканирует все картинки на страницы и назначает им вес равный 1. Все JS-файлы прописываются в его теле, как я расскажу чуть ниже.
Однако хочется, чтобы вес у каждой единицы контента был не единицей, а реальным объемом в байтах. Да и для AJAX-приложений хотелось бы сразу подгрузить всю графику.
Для этого я написал скрипт на PHP, который сканирует папку с картинками оформления и заносит это все дело с размерами файлов в массив, опционально сжимая.
Так что дописав перед следущее, мы получим прогрессбар, который будет показывать ход загрузки всего контента на странице, после чего плавно исчезнет.
Когда загрузились все JS-файлы, запускаются функции, которые есть в массиве invoke. Если мы с помощью jQuery подгружаем контент, то функция будет выглядить так:
PHP-скрипт делает следующее: он заносит в массив необходимые скрипты с их размерами, а так же картинки и дополнительные функции. Код:
Уже после того, как загрузились все картинки и JS-файлы, вызывается событие onLoad, которое вы указали в функции dLoader.start()
Еще есть способ кастомизации процесса загрузки.
Сегодня будем говорить о том, как скрыть загрузку сайта на WordPress с помощью прелоадера. Все мы видели такие сайты, на которых вместо белого экрана загрузки выводиться анимированное изображение. Этот маленький трюк может помочь в том случае, если у вас медленно грузиться сайт, но вы все же хотите удержать нетерпеливых пользователей, которые не любят по долгу смотреть на пустой белый экран монитора. Ну что поехали добавлять прелоадер для сайта WordPress
Перед тем как начну описывать плагин и принцип его работы, настоятельно рекомендую . Только в том случае если все указанные рекомендации не помогут, тогда вся надежда на прелоадер и его влияние на терпение пользователей сайта.
Что такое прелоадер (preloader)Прелоадер - это механизм вывода анимации или индикатора загрузки, до полной обработки веб страницы и вывода ее на экран. Другими словами, пока страница сайта обрабатывается и загружается браузером, на экран выводиться анимация, которая заменяет пустой экран.
Я противник данного инструмента, считаю что лучше оптимизировать загрузку сайта чем ставить прелоадер. В моем понимании прелоадер нужен только крупным порталам, интернет магазинам и интернет сервисам с огромными базами данных, которые обрабатывают миллионы данных и у них ну никак не получиться ускорить загрузку. Это лично мое мнение и со мной вы можете не согласиться.
По статистике если сайт грузиться более 4 секунд, возникает большая вероятность отказа. Пользователь может покинуть сайт так и не дождавшись полной загрузки, а это очень плохой показатель. При нормальной оптимизации, не идеальной, но все же, мой сайт грузиться за 2-3 секунды и этот показатель вполне устраивает меня, и как показывает статистика пользователей тоже. По этому еще раз говорю о том, при медленной загрузке сайта нужна оптимизация, а не прелоадер.
После небольшого предисловия вернемся к нашим «баранам». Установим и настроем плагин.
Плагин The Preloader, обзор и настройкаСамый адекватный и бесплатный плагин прелоадер, который я нашел это плагин с уникальным названием - Прелоадер. Да вот так, никаких неожиданностей. Дело в том, что при поиске плагина в библиотеке wordpress.org, вы его не найдете. Нужно в строку поиска писать the preloader. Как устанавливать плагин можно узнать . Выглядит он так:
После установки переходим во вкладку Плагины/Preloader, с этого небольшого меню и начинаются настройки.
Итак, все настройки в коротком списке:
- Первой строчкой настройки является цвет заднего фона прелоадера, по умолчанию он белый (#FFFFFF). Вы можете задать интересующий вас параметр.
- Второе, это место размещение gif анимации, ее можно будет поменять на любую, нужно только учитывать размер 128х128 пикселей. По предложенной в настройках ссылке вы можете скачать интересующую вас анимацию.
- Следующим шагом будет выбор директорий где будет подгружаться прелоадер. Можно установить загрузчик на категории, на весь сайт, отдельно на страницы меток, или только на главную, вам решать.
- Последнее что вам нужно сделать это открывать файл header.php в папке вашей активной темы и добавить сразу после открывающегося тега предложенный див ().
- Если плагин активен, тогда вы сможете уже убедиться в работоспособности плагина.
Стоит еще заметить что при смене GIFки ее название должно быть preloader, и такая анимация в папке плагина image должна быть только одна.
На этом скромное руководство по использованию плагина Preloader для сайта на WordPress закончено, если будут вопросы или проблемы, пишите в комментариях.
В данном уроке разберем, как сделать процентное соотношение загрузки прелоадера с элементами на странице. Тут поработаем с 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;
Добавим еще насколько изображений, посмотрим, как прелоадер будет себя вести при большом их количестве, и заодно проверим дополнительные настройки.
На этой ноте урок я завершаю, кому он был интересен обязательно поделитесь им с друзьями.
Урок подготовил Горелов Денис.
В зависимости от типа веб-ресурса и объема информации на нем, загрузка сайта может занять от нескольких миллисекунд до пары секунд. В процессе загрузки с сайтом может происходить множество вещей: верстка может прыгать в разные стороны, текст может менять начертание. Возникает вполне закономерное желание спрятать всю эту вакханалию подальше от глаз посетителей. Для этого и предназначены прелоадеры.
Прелоадер — это индикатор загрузки сайта. Он может быть выполнен как в виде анимированного 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"); });
Готово! Теперь вместо скачущей в разные стороны верстки посетитель во время загрузки страницы будет видеть наш аккуратный экран загрузки. А работающую версию такого прелоадера можно увидеть на сайте
