3

Уважаемые посетители, столкнулся со сложностью, нуждаюсь в Вашей помощи.

Суть вопроса:

  • При отработке ajax-запроса подгружается много информации из php;
  • Для видимости загрузки сделал preloader страницы, но сейчас решил делать progressbar с отображением значения %% загрузки / количества переданных байт, неважно;
  • Значения прогресса думал получать в цикле и выводить в контейнер с определенным ид / классом.

Суть проблемы:

  • Значение var progress, например, в консоль выводится только после выполнения запроса, а не при каждом изменении значения evt.loaded (объем загруженной информации).

Код:

$(document).ready(function () {
    $.ajax({ 
        xhr: function() {
            var xhr = new window.XMLHttpRequest();

            xhr.addEventListener("progress", function(evt){
                for(var i = 1; i<evt.total; i++){
                    var progress = Math.round(((i/evt.total)*100)*100)/100;
                    //действие, вывод значения прогресса (консоль / контейнер)          
                }
            }, false);
            return xhr;
        },         
        type: "POST",
        url: "main_php/result.php",
        dataType: "json",
        success: function (data) {
            //действие (вывод данных на страницу)
        }
    });
});
3
  • 2
    Почитайте вот здесь - learn.javascript.ru/xhr-onprogress, цикл в обработчике progress необходимо убрать. Плюс вы можете отследить прогресс только на загрузку, скачивания информации, а в то время которое сервер тратит на обработку запроса отследить progress не получится, придётся импровизировать. 29 июн 2017 в 9:44
  • Именно эту статью и читал + dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5
    – kstkt
    29 июн 2017 в 10:27
  • попробуйте поиграться с ob_get_contents
    – paqstd
    9 мар 2021 в 22:55

1 ответ 1

0

в процентах получить вероятнее всего у вас не получится, но накинуть какую-нибудь анимашку на

onsend()

и закончить ее на

success()
1
  • Это понятно, что на событиях beforesend,success, complete можно повесить show / hide какую-нибудь gif-анимацию, эти приёмы я знаю, вопрос именно в "живом" прогресс-баре
    – kstkt
    2 окт 2017 в 7:32

Ваш ответ

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

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