0

Представим что у нас сайт (SPA), все страницы грузятся аяксом, мы к примеру юзаем history api. Возможно ли, каким-то образом, показывать юзеру прогресс загрузки страницы? Именно не какую-то анимацию, а реальные данные. Пример того что имею ввиду - красная полоса загрузки, вверху, на youtube.com. Я не думаю что там реальный прогресс, но все же, хочется услышать идеи несмотря на то - насколько тупая эта идея. Это все, при учете что на бэкенде nodejs или php. Как я делал (но получилось просто фэйкопрогрессбар, но выглядело красиво):

  1. Когда юзер кликает на ссылку, прогрессбар начинает наполняться, скорость анимации на этом этапе равна макс. врем. ожидания на сервере в соответствии с шириной самого прогрессбара.

  2. Если ответ пришел, то быстро, плавно, наполняем прогрессбар до конца (300ms например).

  3. Если нет ответа то ждем ошибку о истечении time-out и прячем прогресс.

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

2
  • 1
    Вы всё правильно делаете, реальности не нужно, это не игра и там не гигабайты шейдеров грузятся. Прогрессбар на сайтах нужен для того, чтобы показать юзеру что что-то происходит и сайт не повис. Youtube делает так же. И популярный плагин ricostacruz.com/nprogress делает так же.
    – SlyDeath
    Commented 20 июл. 2015 в 14:24
  • JavaScript начнёт выполняться после загрузки части содержимого. Чтобы контролировать процесс загрузки можно большую часть dom-дерева формировать динамически на стороне клиента. Контроллируя процесс готовности создаваемых элементов. Получается, если javascript отключен и javascript-загрузчик не работает, то страница отобразится почти пустой.
    – user184886
    Commented 20 июл. 2015 в 20:30

2 ответа 2

1

Можно получать общий размер загружаемого файла и сколько загружено на данный момент.

В кратце вот так:

var xhr = new window.XMLHttpRequest();

if ('onprogress' in xhr) {
    progressBar.parent().show();
    loadingPanel.hide();

    var last = 0, max = 100 / len;
    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = Math.min((evt.loaded / evt.total) * max, max);

            if (last < percentComplete) {
                progressWidth += percentComplete - last;
                last = percentComplete;
                progressBar.width(progressWidth + '%');
            }
        }
    }, false);
}

Когда-то давно на похожую тему писал статью на хабре: возможно поможет

1

Я использую для отбражения процесса загрузки каринки, т.к. она самые тяжелые на сайте, т.е. мы выбираем все картинки на сайта

document.querySelector('*') if img

далее использую одну из библиотек проверки предзагрузки картинок, например вот эту https://github.com/CreateJS/PreloadJS А дальше просто выводим процент загрузки, получаются реальные данные загрузки.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.