Давно искали реализацию прогрессбара загрузки как в знаменитом интерфейсе почты GMail? Не вопрос! С плагином «NProgress» это сделать проще простого!
jQuery плагин «NProgress» представляет собой миниатюрный прогрессбар для Ajax приложений, на подобии как в продуктах Google, YouTube и Medium.
Подключение плагина происходит следующим кодом, где к странице подгружаются непосредственно сама библиотека плагина [nprogress.js] и файл стилей [nprogress.css]:
<script type=’text/javascript’ src=’nprogress.js’></script>
<link rel=’stylesheet’ href=’nprogress.css’/>
В принципе, в большинстве случаев для успешной работы прогрессбара, необходимы всего лишь два метода `start()` и `done()`. как Вы успели догадаться, первый стартует анимацию прогрессбара, второй же её останавливает (завершает).
Реализовать это возможно следующим кодом, который осуществляет POST-запрос и в случае его успеха (т.е. получения успешного ответа сервера) заканчивает анимацию прогрессбара:
NProgress.start();
$.ajax({
type: «POST»,
dataType : ‘json’,
data: «»
}).success(function(response) {
if(response.success == 200) {
NProgress.done();
};
});
Интересной идеей будет реализация через `$(document).ready` и`$(window).load`, это позволит визуально показать пользователю, что страница Вашего сайта уже загрузилась.
Вы также можете управлять «прогрессом» загрузки, например устанавливать значения от 0 до 1 на том или ином этапе работы Ваших основных скриптов. Следующий код демонстрирует прогресс загрузки веб-страницы в зависимости от степени доступности того или иного DOM-элемента:
$(‘.header’).load(NProgress.set(0.0)); // Тоже самое, что и `.start()`
$(‘.content’).load(NProgress.set(0.4));
$(‘.footer’).load(NProgress.set(0.6));
$(document).ready(NProgress.set(1.0)); // Тоже самое, что и `.done()`
Кроме того, в плагине предусмотрено увеличение процента «загрузки» прогрессбара по-шагово. Например, следующий код увеличит текущий момент загрузки на 0,2 десятых:
…
NProgress.inc(0.2);
…
Примечательно то, что в случае увеличения шага «загрузки» больше 1.0 (означало бы полную загрузку), фактически, анимация остановится на позиции 0,94, что создаст эффект «зависания» загрузки и плагин по прежнему будет ожидать вызов события `done()` означающего полное завершение загрузки.
Нами были описаны далеко не все методы и настройки плагина, подробнее читайте на сайте разработчика.