Подождите, пока метод jquery.html завершит рендеринг

У меня есть div с вертикальной полосой прокрутки. Div динамически обновляется с помощью ajax и html вставляется с использованием jQuery.html метода. После того, как div обновлен, панель прокрутки вернется в начало, и я пытаюсь сохранить ее в предыдущей позиции.

Вот как я это делаю:

var scrollPos = $('div#some_id').scrollTop(); //remember scroll pos
$.ajax({...
    success: function(data) {
        $('div#some_id').html(data.html_content); //insert html content
        $('div#some_id').scrollTop(scrollPos); //restore scroll pos
    }
});

Это не удается. Мое лучшее предположение заключается в том, что он терпит неудачу из-за того, что вставленный html не отображается (т.е. Нет прокрутки).

Например, это работает.

setTimeout(function(){
    $('div#some_id').scrollTop(scrollPos);
}, 200);

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

Есть ли способ подождать, пока браузер завершит рендеринг вставленного html, прежде чем продолжить?

ОТВЕТЫ

Ответ 1

Он все еще взломан, и на самом деле нет обратного вызова, когда HTML действительно вставлен и готов, но вы можете проверить, вставлены ли элементы в html_content каждые 200 мс, чтобы убедиться, что они действительно готовы и т.д.

Проверьте последний элемент в HTML из вызова ajax:

var timer = setInterval(function(){
   if ($("#lastElementFromAjaxID").length) {
       $('div#some_id').scrollTop(scrollPos);
       clearInterval(timer);
   }
}, 200);

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

Ответ 2

Я просто хочу указать на одно отличие здесь: Одна вещь, когда .html() завершили загрузку, но браузер фактически отображает содержимое, это нечто другое. Если загруженный контент несколько сложный, например, таблицы, divs, css styling, images и т.д. - рендеринг завершится несколько позже, чем все dom ellements присутствуют на странице. Чтобы проверить, все ли там, не означает, что рендеринг завершен. Я искал ответ на это сам, так как теперь я использую функцию setTimeout.

Ответ 3

Такой обратный вызов не существует, потому что .html() всегда работает синхронно