Веб-дизайнеру
Веб-разработчику
Дополнительно
Уникальный прогресс бар загрузки страницы (как на Youtube) + галерея
Скачать
Демо
↓ Также Вам будет интересно ↓
Color Picker (цветовая палитра цветов) – JQuery плагин
Мини галерея изображений с автопрокруткой | JQuery плагин!
Анимированная галерея изображений с эффектами и “сеткой”!
Цветное меню аккордеон на CSS и JQuery
Таймер JQuery обратного отсчета времени + дизайн!
Круглое вращающееся меню на JQuery, зеленый стиль!
Всем привет! В последнее время с развитием последних технологий сайтостроения стали появляться все новые и новые эффекты для сайта и приложения. Одним из таких примеров является недавняя фишка – прогресс бар которая активно используется в некоторых веб-сайтах от Google а также на Youtube, которые показывают состояние загрузки страницы.
В этом небольшом уроке, мы будем использовать новый Jquery плагин NProgress, чтобы добавить прогресс бар для страницы сайта. Если вы хотите узнать больше, читайте дальше!
Плагин NProgress
-это JQuery плагин, который показывает интерактивный индикатор в верхней части страницы, вдохновленный разработкой от YouTube. Он состоит из глобального объекта – NProgress который содержит ряд методов, которые можно вызвать для продвижения индикатора выполнения. Демо пример работы плагина смотрите по ссылке выше.
Работа плагина GitHub предполагает, что вы подключите NProgress.start() для вашего $(document).ready(), вызов плагина NProgress.done() до $(window).load(), что является очень простым способом интеграции плагина. Он не будет показывать реальный прогресс (для этого вам придется следить за всеми ресурсами, которые включены в вашу страницу и увеличить бар вручную), однако большинство людей в любом случае не заметят этого.
Допустим у вас есть хорошая идея о том, как используется NProgress, поэтому давайте сделаем более сложный пример – галерея, которая показывает прогресс-бар при загрузке изображений. Прогресс бар будет соответствовать фактическому числу загруженных изображений.
Галерея
Как обычно, мы начинаем с разметки HTML. На этот раз она как обычно до невозможности проста – у нас есть один DIV для фотографий и кнопка загрузки большего числа картинок. Вот как это выглядит:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!--файл стилей перед закрывающим тегом head--> <link href="/web-developer/jquery/assets/nprogress/nprogress.css" rel="stylesheet" /> <!--здесь подгружаются картинки--> <div id="main"></div> <a href="#" id="loadMore">Загрузить далее</a> <!--скрипты для работы прогресс бара--> <script src="/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="/web-developer/jquery/assets/nprogress/nprogress.js"></script> <script src="/web-developer/jquery/assets/js/script.js"></script> |
Вот в принципе и всё, что нужно – подключаем Jquery библиотеку, плагин NProgress и небольшой самописный скрипт.
Также есть кое-что интересное в JQuery части урока. Здесь я использую , чтобы показать фотографии последовательно. Это необходимо, потому что мы хотим фотографии отображались параллельно (что значительно быстрее), но в поле зрения исчезать один за другим. Это являются мощным инструментом, который может упростить асинхронное взаимодействие.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
(function($){ // An array with photos to show on the page. Instead of hard // coding it, you can fetch this array from your server with AJAX. var photos = [ '/web-developer/jquery/assets/photos/1.jpg', '/web-developer/jquery/assets/photos/2.jpg', '/web-developer/jquery/assets/photos/3.jpg', '/web-developer/jquery/assets/photos/4.jpg', // more photos here ]; $(document).ready(function(){ // Define some variables var page = 0, loaded = 0, perpage = 10, main = $('#main'), expected = perpage, loadMore = $('#loadMore'); // Listen for the image-loaded custom event main.on('image-loaded', function(){ // When such an event occurs, advance the progress bar loaded++; // NProgress.set takes a number between 0 and 1 NProgress.set(loaded/expected); if(page*perpage >= photos.length){ // If there are no more photos to show, // remove the load button from the page loadMore.remove(); } }); // When the load button is clicked, show 10 more images // (controlled by the perpage variable) loadMore.click(function(e){ e.preventDefault(); loaded = 0; expected = 0; // We will pass a resolved deferred to the first image, // so that it is shown immediately. var deferred = $.Deferred().resolve(); // Get a slice of the photos array, and show the photos. Depending // on the size of the array, there may be less than perpage photos shown $.each(photos.slice(page*perpage, page*perpage + perpage), function(){ // Pass the deferred returned by each invocation of showImage to // the next. This will make the images load one after the other: deferred = main.showImage(this, deferred); expected++; }); // Start the progress bar animation NProgress.start(); page++; }); loadMore.click(); }); // Create a new jQuery plugin, which displays the image in the current element after // it has been loaded. The plugin takes two arguments: // * src - the URL of an image // * deferred - a jQuery deferred object, created by the previous call to showImage // // Returns a new deferred object that is resolved when the image is loaded. $.fn.showImage = function(src, deferred){ var elem = $(this); // The deferred that this function will return var result = $.Deferred(); // Create the photo div, which will host the image var holder = $('<div class="photo" />').appendTo(elem); // Load the image in memory var img = $('<img>'); img.load(function(){ // The photo has been loaded! Use the .always() method of the deferred // to get notified when the previous image has been loaded. When this happens, // show the current one. deferred.always(function(){ // Trigger a custom event on the #main div: elem.trigger('image-loaded'); // Append the image to the page and reveal it with an animation img.hide().appendTo(holder).delay(100).fadeIn('fast', function(){ // Resolve the returned deferred. This will notifiy // the next photo on the page and call its .always() callback result.resolve() }); }); }); img.attr('src', src); // Return the deferred (it has not been resolved at this point) return result; } })(jQuery); |
Индикатор прогресс бара увеличивается с каждым загруженным изображением функцией обратного вызова, которая отслеживает загруженные изображения. Таким образом, функция ShowImage будет обращаться только на загрузку и отображение фотографий.
Этот бар сделает загрузку Вашей галереи ещё солиднее! Применение данному бару может быть совсем, поэтому экспериментируйте, пробуйте и все получиться! 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
