Wait For Jquery .html Method To Finish Rendering

I have div with vertical scroll bar. Div is being updated dynamically via ajax and html is inserted using jQuery's .html method. After div is updated scroll bar returns to top and

Solution 1:

It's still a hack, and there really is no callback available for when the HTML is actually inserted and ready, but you could check if the elements in html_content is inserted every 200ms to make sure they really are ready etc.

Check the last element in the HTML from the ajax call:

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

For a more advanced option you could probably do something like this without the interval, and bind it to DOMnodeInserted, and check if the last element is inserted.

Solution 2:

I will just like to point out one difference here: One thing, is when the .html() have completed loading, but the browser actually render the content is something different. If the loaded content is somewhat complex, like tables, divs, css styling, images, etc - the rendering will complete somewhat later than all the dom ellements are present on the page. To check if everything is there, does not mean the rendering is complete. I have been looking for an answer to this by myself, as now I use the setTimeout function.

Solution 3:

Such callback does not exists because .html() always works synchronously

Solution 4:

If you are waiting for images loading, there's one approach https://github.com/desandro/imagesloaded