Attendi il metodo .html jquery per terminare il rendering

Question

Ho div con barra di scorrimento verticale. Div viene aggiornato dinamicamente tramite ajax e html viene inserito usando il metodo .html di jQuery. Dopo che div è stata aggiornata, la barra di scorrimento torna all'inizio e sto cercando di mantenerla nella posizione precedente.

Questo è il modo che sto cercando è:

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

Questo fallisce. La mia ipotesi migliore è che non riesca a causa dell'inserimento di HTML non reso (cioè senza scorrimento).

Ad esempio questo funziona.

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

Ma questo è un trucco sporco secondo me. Non ho modo di sapere che alcuni browser non prenderanno più di questi 200ms per rendere il contenuto inserito.

C'è un modo per attendere che il browser completi il ​​rendering di html inserito prima di continuare?

Answer 1

E 'ancora un hack, e non c'è davvero nessuna richiamata disposizione per quando il codice HTML è effettivamente inserito e pronto, ma si potrebbe verificare se gli elementi in html_content è inserito ogni 200ms per assicurarsi che essi realmente sono pronti ecc

controllare l'ultimo elemento nel codice HTML dalla chiamata AJAX:

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

per una soluzione più avanzata, probabilmente si potrebbe fare qualcosa di simile, senza l'intervallo, e associarlo al DOMnodeInserted, e verificare se l'ultimo elemento è inserito.

Answer 2

Tale callback non esiste perché .html() funziona sempre in modo sincrono

Answer 3

Mi limito a far notare una differenza qui: Una cosa, è quando il .html() hanno completato il caricamento, ma il browser in realtà il rendering del contenuto è qualcosa di diverso. Se il contenuto caricato è piuttosto complesso, come tabelle, div, stile css, immagini, ecc., Il rendering verrà completato un po 'più tardi rispetto a tutte le dom ellements presenti nella pagina. Per verificare se tutto è lì, non significa che il rendering è completo. Sono stato alla ricerca di una risposta a questo da solo, come ora uso la funzione setTimeout.

Answer 4

Se siete in attesa per le immagini di carico, c'è un approccio https://github.com/desandro/imagesloaded