Всем привет! Пытаюсь сделать плавную вставку данных, полученных через Ajax на страницу. Идея такая, что в блоке уже есть некий контент, по нажатию на кнопку - подгружается другой контент и вставляется в уже существующий блок.
т.к. в ответе приходит готовы html содержащий изображения получается так, что после вставки полученного контента, существующий блок сначала уменьшается до высоты 0 (т.к. картинки еще не загрузились), а потом увеличивается по мере загрузки изображений. Получаются очень неприятные скачки.
Я попытался перед вставкой зафиксировать размер существующего блока, с помощью height и overflow, а затем посчитать высоту всех элементов пришедших из Ajax и с помощью $.animate() увеличить высоту до полученной, но у меня не получилось, т.к. я не могу определить момент, в который картинки уже загружены на страницу и в какой момент "уже пора" рассчитывать высоту элементов?
Подскажите плз что я делаю не верно. Вот что у меня получилось:
$('.show_full').on('click', '.btn', function(){
let th = $(this);
$.ajax({
url: '/testAjax.php',
method: 'GET',
dataType: 'JSON',
beforeSend: function(){
th.html('<div class="spinner"></div>');
}
}).done(function(content){
if(content){
let innerBlock = th.closest('.post_main');
let oldH = innerBlock.outerHeight();
innerBlock.css('height', oldH).css('overflow', 'hidden');
// надеялся на InnerHTML, т.к. он загружает данные, но он не помог
let div = document.createElement('div');
div.innerHTML = content;
// не дожидаясь загрузки, данные вставляются в блок и контент прыгает
innerBlock.html(div.innerHTML);
innerBlock.css('height', "");
return;
}
}).fail(function(){
alert("Err");
});
})
