NProgress: прогресс-бар как на YouTube и Medium

[SAKrisT]

странная тенденция. В iOS 7 теперь стандартный прогресс-бар выглядит примерно так же.

[crwin]

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

[cyberface]

Разве в новом сафари или в плагинах к Файеру эта полоска появляется и при XHR запросах? Это плагин для веб приложений — когда вы сами подгружаете контент, вряд ли при этом будут конфликтовать два прогресс бара. Да, в итоге у всех будут бары разных цветов, но лично я не вижу в этом что-то плохого, в конце концов цветовая схема у сайтов разная.

[copist]

Не туда комент вставил :(

[Francyz]

А меня этот прогресс-бар по началу раздражал. Вечно при обновлении / загрузки страницы начинала бежать эта полоса и я все время отвлекался от содержимого и переводил взгляд в верхнюю часть монитора.

[M03G]

Так вот что это за полосочка! А я всё гадал, прогресс чего она отображает…

[cyberbobs]

У нас во встроенном в софт браузере (ограниченном доступом строго к определённому URI и без адресной строки в принципе) подобная полоска используется уже около года :) Забавно, что это стало тенденцией.

[Triang3l]

А как меняется URL, но при этом не перезагружается страница?
Только через знак #?

[Triang3l]

Хотя вообще, не вижу в таком приёме ничего хорошего. Весит много не шапка, а контент, а картинки и скрипты кешируются.

[merkuriy]

Дело ведь не только в весе контента/страницы. Тут много факторов, тот же рендеринг, инициализация скриптов и т. п. Представляете, если бы при загрузке нового текстового документа весь офисный пакет стартовал бы заново, а при переходе на другую веб-страницу заново стартовал бы весь браузер.

Внутри самих веб-страниц всё так же — если пользователь запросил какие-либо дополнительные данные, то зачем же загружать всю страницу заново с этими дополнительными данными, когда можно загружать и отрендерить только эти новые данные.

[Triang3l]

Для веб-приложений наподобие текстовых редакторов это очень полезно, но просто для сайтов из страниц — детское украшательство.

[cyberface]

HTML5 history API

[furyk]

Добро пожаловать в мир Single Page Applications.

[Chikiro]

В браузере по умолчанию для Дебиана — Epiphany — уже достаточно давно такой прогресс бар для любых страниц.

[copist]

Что то типа

$('a.clickMe').click(function() {
	NProgress.start(); // начать "загрузку"
	$.ajax({
		url: "/get/some/stuff/",
	}).error(function(){
		NProgress.done(); // заставить индикатор дойти до конца и пропасть
	}).done(function() {
		NProgress.done(); // заставить индикатор дойти до конца и пропасть
	});
});

Правильно?

Не пойму только, в какой момент вставлять NProgress.set(0.3) или NProgress.inc() — это если серия связанных запросов делается?

[cyberface]

Скорее всего, я еще попробовал поэкспериментировать с событием progress которое присутствует в XHR2, правда у меня все время выдавало 1, интересно будет ли оно работать для нефайловых запросов, в спеках вроде сказано что должно файритсья если есть content-length.

[ArsenBespalov]

Что-то типа такого:

$.ajax({
    type: 'GET',
    dataType: 'json',
    url: URL,
    cache: false,
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responseText);
        alert(thrownError);
    },
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        //Download progress
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                NProgress.set(Math.round(percentComplete));
            }
        }, false);
        return xhr;
    },
    beforeSend: function () {
        NProgress.start();
    },
    success: function (json) {
        NProgress.done();
    }
});

Но при этом URL должен быть локальный и сервер должен отведать на каждую страницу Content-Length, тогда все будет работать.

[not_ice]

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

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