Warte auf die jquery .html-Methode, um das Rendering zu beenden

Question

Ich habe Div mit vertikaler Bildlaufleiste. Div wird dynamisch über Ajax aktualisiert und HTML wird mit der jQuery-Methode .html eingefügt. Nachdem div aktualisiert wurde, kehrt die Bildlaufleiste nach oben zurück und ich versuche, sie in der vorherigen Position zu halten.

Dies ist, wie ich es bin versucht:

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

Dies schlägt fehl. Meine beste Vermutung ist, dass es aufgrund fehlender HTML-Einfügung fehlschlägt (zB kein Scroll).

Zum Beispiel funktioniert das.

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

Aber das ist schmutzig meiner Meinung nach. Ich habe keine Möglichkeit zu wissen, dass einige Browser nicht mehr als diese 200ms benötigen, um eingefügten Inhalt zu rendern.

Gibt es eine Möglichkeit zu warten, bis der Browser das eingefügte HTML beendet hat, bevor er fortfährt?

Answer 1

Es ist immer noch ein Hack, und es gibt wirklich keinen Rückruf für zur Verfügung, wenn die HTML tatsächlich eingeführt wird, und bereit, aber man konnte überprüfen, ob die Elemente in html_content all 200ms eingeführt werden, um sicherzustellen, dass sie wirklich bereit, usw.

überprüfen Sie das letzte Element in der HTML-Code aus dem ajax-Aufruf:

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

eine erweiterte Option, die Sie wahrscheinlich ohne das Intervall so etwas tun könnte, und binden Sie es an DOMnodeInserted, und prüfen Sie, ob das letzte Element ist eingefügt.

Answer 2

Ein solcher Rückruf existiert nicht, weil .html() immer synchron

arbeitet

Answer 3

Ich will nur hier einen Unterschied Punkt darauf: Eine Sache ist, wenn die .html() Laden abgeschlossen haben, aber der Browser machen tatsächlich den Inhalt ist etwas anderes. Wenn der geladene Inhalt etwas komplex ist, wie Tabellen, divs, CSS-Stile, Bilder usw. - wird das Rendern etwas später abgeschlossen, als alle Domänen auf der Seite vorhanden sind. Zu überprüfen, ob alles vorhanden ist, bedeutet nicht, dass das Rendering abgeschlossen ist. Ich habe selbst nach einer Antwort gesucht, da ich jetzt die Funktion setTimeout verwende.

Answer 4

Wenn Sie Bilder Laden warten, gibt es einen Ansatz https://github.com/desandro/imagesloaded