Многие программисты оптимизируют 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()
Еще есть способ кастомизации процесса загрузки.
Урок, на котором рассмотрим процесс создания прелоадера для страницы (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/ или восвпользоваться этим архивом .
Никому не нравится долго ждать, пока загрузится страница сайта, слайдер или другая информация. Но если сократить время ожидания сайта не удается (например, он интерактивный, и для корректной работы должны подгрузиться все скрипты), нужно постараться как-то скрасить время ожидания загрузки.
Для этого используют анимированные прелоадеры.
Мы выбрали для вас 20 интересных прелоадеров, выполненных с помощью CSS3 и HTML5 или JQuery. Они способны заметно улучшить пользовательский опыт.
Вы можете использовать анимированные индикаторы загрузки для галерей, слайдеров, блогов и многого другого.
Вот простые и элегантные загрузчики, выполненные при помощи CSS. Могут легко стать частью любого веб-проекта – просто скопируйте и вставьте код.
А это – сочный прелоадер в виде радуги, создан на CSS. Подойдет для ярких, динамичных, молодежных проектов!
А этот индикатор загрузки хорошо подойдет для сайтов с карточным дизайном.
Этот изящный прелоадер достигает волшебного эффекта за счет сочетания HTML и CSS. Выглядит здорово, и может чудесно работать на любом типе веб-сайтов.
Динамическая анимация – разноцветные блоки, которые приводит в движение небольшой шарик.
Это отличный загрузчик, который может быть интегрирован с логотипом, названием сайта или броским лозунгом. Станет сильным элементом брендинга для вашего сайта.
Этот удивительный CSS-погрузчик подходит для различных проектов и приложений. Простой и элегантный, а добавить на сайт его можно в два клика.
Только два цвета и простые фигуры. Но какая интересная анимация! Этот прелоадер украсит любой ваш сайт.
Этот прелоадер идеально подходит для динамичных проектов со стильным, минималистским дизайном.
Снова классика, снова кубики. Но очень интересная анимация делает этот индикатор загрузки притягивающим взгляд.
И эта картинка из разряда «не могу оторвать взгляд». Просто завораживает, и гарантировано скрасит время ожидания загрузки для ваших пользователей.
Если вы ищете индикаторы загрузки, как на Tumblr, обратите внимание на эти! Анимация на основе CSS, с использованием SVG иконок.
А это круговые интерактивные CSS3 прелоадеры. Наведите курсор мыши на отдельные участки и посмотрите на интересный эффект.
Простая и элегантная анимация в пастельных тонах. Идеальна для сайтов женской тематики.
А в этом комплекте вы можете выбрать анимацию загрузки на свой вкус. Будут это часики или просто белые кружки?
Простой загрузчик с прямоугольными формами, которые вращаются. Легко реализовать на любом сайте.
А здесь целая коллекция анимированных загрузчиков. Есть из чего выбрать, и все легко интегрируются в любой сайт.
Интересный прелоадер с кругами. Они то перестраиваются в треугольник, то в пунктирную линию.
Еще одна коллекция индикаторов, с различной анимацией. Все прелоадеры – в форме круга.
Эта анимация может быть наложена на текстовый логотип или любой текст – например, на название компании, или ее слоган.
Надеемся, что-то из этой коллекции пригодится вам в работе над следующим проектом!
В зависимости от типа веб-ресурса и объема информации на нем, загрузка сайта может занять от нескольких миллисекунд до пары секунд. В процессе загрузки с сайтом может происходить множество вещей: верстка может прыгать в разные стороны, текст может менять начертание. Возникает вполне закономерное желание спрятать всю эту вакханалию подальше от глаз посетителей. Для этого и предназначены прелоадеры.
Прелоадер — это индикатор загрузки сайта. Он может быть выполнен как в виде анимированного 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"); });
Готово! Теперь вместо скачущей в разные стороны верстки посетитель во время загрузки страницы будет видеть наш аккуратный экран загрузки. А работающую версию такого прелоадера можно увидеть на сайте
