Espere a que el método jquery .html finalice la representación

Question

Tengo div con barra de desplazamiento vertical. Div se está actualizando dinámicamente a través de ajax y html se inserta utilizando el método jQuery .html. Después de actualizar div, la barra de desplazamiento vuelve a la parte superior y trato de mantenerla en la posición anterior.

Ésta es la forma en que estoy tratando de que:

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 
    } 
}); 

Esta falla. Mi mejor suposición es que está fallando debido a html insertado no procesado (es decir, sin desplazamiento).

Por ejemplo, esto funciona.

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

Pero esto es un hack sucio en mi opinión. No tengo forma de saber que algunos navegadores no tardarán más de estos 200ms en renderizar el contenido insertado.

¿Hay alguna manera de esperar que el navegador termine de mostrar el html insertado antes de continuar?

Answer 1

Es todavía un corte, y realmente no hay devolución de llamada disponibles para cuando en realidad se inserta el código HTML y listo, pero se puede comprobar si los elementos en html_content se inserta cada 200 ms para asegurarse de que realmente están dispuestos etc.

Verificar el último elemento en el código HTML de la llamada AJAX:

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

para una opción más avanzada que probablemente podría hacer algo como esto sin el intervalo, y enlazarlo a DOMnodeInserted, y comprobar si el último elemento es insertado.

Answer 2

Dicha devolución de llamada no existe porque .html() siempre funciona de forma sincrónica

Answer 3

Me limitaré a señalar una diferencia en este caso: Una cosa, es cuando el html() han completado la carga, pero el navegador en realidad representar el contenido es algo diferente Si el contenido cargado es algo complejo, como tablas, divs, estilo css, imágenes, etc., la representación se completará un poco más tarde que todos los elementos dom presentes en la página. Comprobar si todo está allí, no significa que la representación esté completa. He estado buscando una respuesta a esto solo, ya que ahora uso la función setTimeout.

Answer 4

Si usted está esperando para cargar las imágenes, hay un enfoque https://github.com/desandro/imagesloaded