@zkrvndm
Веб-разработчик

Как мониторить процент загрузки при использовании AJAX?

Здравствуйте, загружаю html-файл посредством jQuery.ajax() - метод использую POST. Подскажите, не предоставляет ли jQuery из под коробки инструментов для отслеживания процента загрузки документа?

Хочу индикацию прикрутить, а то нехорошо будет, если пользователи будут думать, что страница зависла и кликать все подряд.
  • Вопрос задан
  • 316 просмотров
Решения вопроса 2
Negezor
@Negezor
Senior Shaurma Developer
https://stackoverflow.com/questions/19126994/what-...
$.ajax({
    xhr: function() {
       var xhr = new window.XMLHttpRequest();

       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               //Do something with download progress
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        //Do something on success
    }
});
Ответ написан
@zkrvndm Автор вопроса
Веб-разработчик
Неожиданно много человек подписалось) Распишу результаты экспериментов. Код предложенный Владлен Хеллсайт у меня не сработал, хрен знает в чем дело, но глубоко копать не стал, так как мне на глаза попался вот такой jQuery-плагин как раз добавляющий нужный функционал. Для использования подключаем jq-ajax-progress.js у себя на сайте, а дальше используем его функционал следующим образом:
jQuery.ajax({
	type: 'POST',
	url: '/',
	data: { get : 'table' },
	cache: false,
	success: function(result) {
		console.log(result);
	},
	error: function(result) {
		console.log('Ошибка!');
	},
	progress: function(e) {
		procent = (e.loaded * 100 / e.total).toFixed();
		console.log(procent); // Процент приема файла
	}
});

Думаю всем понятно, что в e.loaded лежит кол-во загруженных байт, а e.total размер файла.

Если вдруг у вас не работает, гляньте значение e.total - хоть это и размер файла, но лично у меня он почему был равен нулю, в итоге расчеты процента загрузки были неверными, даже пробовал в php-скрипте (что отдает файл) прописать заголовок header с размером файла в байтах, но не помогло. Пришлось делать обходной манер: сначала отдельным запросом запрашивать с сервера размер файла, а потом загружать сам файл и уже зная его размер вычислять процент, по мере загрузки.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы