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

Question

[greck10]

Для обработки события scroll нужно узнать высоту документа: var heightPage=$('body').outerHeight(true);
Но если на странице есть асинхронные элементы AJAX влияющие на высоту, то outerHeight(true) выдает не правильный результат. Понятно, что нужно узнавать высоту после загрузки всех элементов AJAX на странице, но как отследить их загрузку?

Очевидно, что нужно использовать обьект deferred, и видимо с функцией $.when(). Два дня пытаюсь разобраться как использовать этот обьект, ничего не получается.

У меня есть пользовательская функция, которая вызывается несколько раз на странице (по количеству AJAX элементов):

var ajaxchange = function(ser, ths){
                     var ld=$('<div class="loader-wrapper-str"><div class="loader"></div></div>');
                    $.ajax({
                        url:"/include/data.php",
                        type: "GET",
                        data: ser,
                        beforeSend:function(){
                            ths.replaceWith(ld);
                        },
                        success:function(result){
                            ld.replaceWith(result);
                        }
                    });  
                }

                // Вызываю ее для каждого элемента
                $('.js-ajax-data').each(function(){
                    var ths=$(this);
                    ajaxchange({tm: ths.data('id'), ser: ths.data('ser')}, ths); 
                });
                

                // После загрузки нужно узнать высоту. Как?
                var heightPage=$('body').outerHeight(true);

Как к этой функции прикрутить проверку что все элементы загружены? Допишите, пожалуйста, прям в моем коде. Очень нужна помощь!

Answer 1

[Алексей Уколов]

var requests = [];
var ajaxchange = function (ser, ths) {
	var ld = $('<div class="loader-wrapper-str"><div class="loader"></div></div>');

	return $.ajax({
		url: "/include/data.php",
		type: "GET",
		data: ser,
		beforeSend: function () {
			ths.replaceWith(ld);
		},
		success: function (result) {
			ld.replaceWith(result);
		}
	});
};

$('.js-ajax-data').each(function () {
	var ths = $(this);
	requests.push(ajaxchange({tm: ths.data('id'), ser: ths.data('ser')}, ths));
});

$.when.apply($, requests).then(function () {
	var heightPage = $('body').outerHeight(true);
});

Comments

[greck10]

Алексей, почему то не работает. Значение heightPage то же, что и раньше, меньше реального. "Уважайте сообщество и сообщество будет уважать вас (с)" - я что то сделал не так или это для профилактики?

[Алексей Уколов]

Само значение-то вычисляется после завершения всех запросов?
Это просто подпись ко всем моим ответам.

[pomeo]

greck10: это у него просто подпись такая, к вашему вопросу не имеет отношения.

[greck10]

Я, наверное, жестко туплю. В вашем коде я дописал: $.when.apply($, requests).then(function () { var heightPage = $('body').outerHeight(true); console.log(heightPage); }); и смотрю значение высоты в консоли загружая страницу. "Само значение-то вычисляется после завершения всех запросов?" - не понимаю. У меня же суть вопроса была в том, что бы определить момент завершения запросов (загрузки элементов) и посчитать высоту. Или о каких запросах вы говорите?

[Алексей Уколов]

greck10: Вот я и спрашиваю - значение вычисляется (выводится в консоль) после окончания всех запросов, то есть код, который я привел работает правильно или нет? Если ожидается ответ от всех запросов, но высота определяется все-равно неверно, то дело в чем-то другом. Можно попробовать добавить небольшой таймаут, чтобы все успело отрендериться, но это больше хак, конечно.

[greck10]

Ваш код не выдает ошибок. Но визуально значение высоты в консоли появляется ДО загрузки AJAX элементов, еще во время когда на странице на их месте графические загрузчики крутятся. Впрочем, элементы загружаются очень быстро, могу и ошибаться.

[greck10]

Да, совершенно точно значение появляется ДО загрузки.

[asdz]

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

[greck10]

Алексей, извините, это у меня руки кривые. Кажется все работает. Я просто написал код этих AJAX элементов (слайдеры) как плагин, и вроде в этом проблема. Большое вам спасибо!!