Уникальный прогресс бар загрузки страницы (как на Youtube) | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryУникальный прогресс бар загрузки страницы (как на Youtube) + галерея
Дата: 17.11.2013 в 01:26 | Просмотров: 9273

Уникальный прогресс бар загрузки страницы (как на Youtube) + галерея

прогресс бар как на youtube
Скачатьбесплатно с сервера
Демодемонстрация

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

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

Плагин NProgress

NProgress -это JQuery плагин, который показывает интерактивный индикатор в верхней части страницы, вдохновленный разработкой от YouTube. Он состоит из глобального объекта – NProgress который содержит ряд методов, которые можно вызвать для продвижения индикатора выполнения. Демо пример работы плагина смотрите по ссылке выше.

Работа плагина GitHub предполагает, что вы подключите NProgress.start() для вашего $(document).ready(), вызов плагина NProgress.done() до $(window).load(), что является очень простым способом интеграции плагина. Он не будет показывать реальный прогресс (для этого вам придется следить за всеми ресурсами, которые включены в вашу страницу и увеличить бар вручную), однако большинство людей в любом случае не заметят этого.

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

Галерея

Как обычно, мы начинаем с разметки HTML. На этот раз она как обычно до невозможности проста – у нас есть один DIV для фотографий и кнопка загрузки большего числа картинок. Вот как это выглядит:

Вот в принципе и всё, что нужно – подключаем Jquery библиотеку, плагин NProgress и небольшой самописный скрипт.

прогресс бар галереи

Также есть кое-что интересное в JQuery части урока. Здесь я использую отложенный объект, чтобы показать фотографии последовательно. Это необходимо, потому что мы хотим фотографии отображались параллельно (что значительно быстрее), но в поле зрения исчезать один за другим. Это являются мощным инструментом, который может упростить асинхронное взаимодействие.

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

Этот бар сделает загрузку Вашей галереи ещё солиднее! Применение данному бару может быть совсем, поэтому экспериментируйте, пробуйте и все получиться! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tutorialzine.com/2013/09/quick-tip-progress-bar/
Перевел: Владислав Бондаренко


Добавить комментарий