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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сейчас мы создадим классический вращающийся прелоадер на чистом 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 и:after

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

Рисуем внутренний псевдокруг 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;

Анимация по кадрам @keyframes

Пришло время запускать наши круги, делает это свойство transform: rotate - что значит поворот. 0% - старт, а 100% - финиш. Каждый круг повернется на 360 градусов.

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

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

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

< div id ="preloaderbg" class ="centerbg1" >

< div class ="centerbg2" >

< div id ="preloader" >

< script type ="text/javascript" >

document .getElementById("preloaderbg" ).style.display = "block" ;

.centerbg1 {

display: none;

width:100%;

height:100%;

position: absolute;

top: 0px;

left: 0px;

z-index: 1000;

background: url("/design/im/texture1.jpg" ) #3c363e;

.centerbg2 {

position: absolute;

left: 50%;

top: 50%;

#preloader {

top: -50%;

left: -50%;

position: relative;

width: 333px;

height: 26px;

background: url();

border: solid #edda3d 2px;

* This source code was highlighted with Source Code Highlighter .

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

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

document .body.style.overflow = "visible" ;

* This source code was highlighted with Source Code Highlighter .

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

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

document .getElementById("loaderbg" ).style.display = "block" ;

document .body.style.overflow = "hidden" ;

pbPos = 0;

pbInt = setInterval(function () {

document .getElementById("preloader" ).style.backgroundPosition = ++pbPos + "px 0" ;

}, 25);

* This source code was highlighted with Source Code Highlighter .

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

clearInterval(pbPos);

document .getElementById("loaderbg" ).style.display = "none" ;

* This source code was highlighted with Source Code Highlighter .

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

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

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

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

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

< div id ="loaderbg" class ="centerbg1" >

< div class ="centerbg2" >

< div id ="preloader" >

< img src ="/design/im/progbar_ph.gif" />

< div id ="progbarfg" >

* This source code was highlighted with Source Code Highlighter .

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

#progbarfg {width: 0px; background: url(‘/design/im/progbar_fg.png’)}

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

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

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

Всему этому (за вычетом CSS и HTML) мы назначаем вес в байтах (или условный вес), например, единицу, и по мере загрузки каждого файла (или выполнения функции) мы двигаем наш прогрессбар.

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

< script type ="text/javascript" >
dLoader.start("progbarfg" , 333, "count" );

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

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

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

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

dLoader.start("mainprogbarfg" , 333, "size" , function (){ $("#preloaderbg" ).fadeOut(250); });

* This source code was highlighted with Source Code Highlighter .

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

function fn(callBack){

$.get("/" , params , function (data){ someHandler(data); eval(callBack); });

* This source code was highlighted with Source Code Highlighter .

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

$data ["js" ] = array (

array ("path" => "jquery-1.2.6.min.js" , "size" => filesize($jsRoot."/jquery-1.2.6.min.js" )),

array ("path" => "functions.js" , "size" => filesize($jsRoot."/functions.js" ))

$data ["im" ] = GetFiles($imgRoot, true );

$data ["invoke" ] = array (

"action" => "loadTemplates" ,

"size" => GetDirSize(dirname(__FILE__)."/design/ajax templates/" , false )

$data ["jspath" ] = "/design/js/" ;

$data ["impath" ] = "/design/im" ;

* This source code was highlighted with Source Code Highlighter .

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

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

Урок, на котором рассмотрим процесс создания прелоадера для страницы (preload page). В качестве прелоадера будем использовать иконку Font Awesome или анимированное изображение gif, которое будет отображаться во время загрузки страницы.

Как сделать прелоадер для сайта

Страница любого веб-сайта при её открытии не загружается мгновенно. На загрузку и отображение страницы тратиться некоторое время, которое может составлять от 1 до нескольких секунд. Чтобы данный процесс (т.е. процесс загрузки страницы) как-то сгладить для пользователя, ему на это время можно показать анимированное изображение или иконку.

Процесс создания прелоадера довольно прост и заключается в том, что нам необходимо показать некоторый блок (#before-load), содержащий анимированное изображение или иконку, сразу после открытия страницы сайта. А после того как загрузка страницы полностью завершиться, этот блок (#before-load) с анимированным изображением gif или иконкой необходимо скрыть от пользователя.

Создание прелоадера для страницы

Разработку прелоадера, который будет выглядеть как белый фон с анимированной иконкой, выполним за 3 шага:

1. Создадим HTML-код, состоящий из блока и иконки Font Awesome. Этот кусок кода необходимо разместить в документе таким образом, чтобы он отобразился пользователю первым, т.е. сразу после открывающего тега body:

2. Создадим стили CSS для блока div и элемента i (иконки).

#before-load { position: fixed; /*фиксированное положение блока*/ left: 0; /*положение элемента слева*/ top: 0; /*положение элемента сверху*/ right: 0; /*положение элемента справа*/ bottom: 0; /*положение элемента снизу*/ background: #fff; /*цвет заднего фона блока*/ z-index: 1001; /*располагаем его над всеми элементами на странице*/ } #before-load i { font-size: 70px; /*размер иконки*/ position: absolute; /*положение абсолютное, позиционируется относительно его ближайшего предка*/ left: 50%; /*слева 50% от ширины родительского блока*/ top: 50%; /*сверху 50% от высоты родительского блока*/ margin: -35px 0 0 -35px; /*смещение иконки, чтобы она располагалась по центру*/ } 3. Добавим сценарий, скрывающий прелодер после загрузки страницы (т.е. когда произойдёт load у объекта window): $(window).load(function() { $("#before-load").find("i").fadeOut().end().delay(400).fadeOut("slow"); });

Если Вы хотите использовать в качестве индикатора прелоадера анимированное изображение gif, то необходимо произвести на вышепредставленных этапах следующие изменения:

В HTML-коде убрать классы Font Awesome:

В стилях CSS произвести следующие изменения (изменить правило #before-load i {..}):

#before-load i { width: 70px; /*ширина gif-изображения*/ height: 70px; /*высота gif-изображения*/ position: absolute; left: 50%; top: 50%; background: url("assets/images/img.gif") no-repeat 50% 50%; /*расположение (url) изображения gif и др. параметры*/ margin: -35px 0 0 -35px; }

Скачать анимированные gif-изображения для Вашего сайта можно с ресурса http://preloaders.net/ или восвпользоваться этим архивом .