Load all AJAX content, including images, before rendering

I'm working on a project that needs to automatically load content and insert it at the beginning of a page without disturbing the page's vertical scroll position. Inserting the content, calculating its height, and then adding that to the page's scroll position has worked for me so far, but now I'm encountering issues where it doesn't get the correct height if there are images (presumably because those images haven't loaded yet). How can I load the images before inserting the content into the page, so that it calculates the correct height upon insertion? Or is there an even better way to go about doing this?

Some (simplified) code for reference:

        $.ajax({
            type: "POST",
            url: post_url,
            dataType: "json",
            data: post_data,
            success: function(data, stat, jqXHR) {
                if (data.content.length) {
                    var updates = build_content(data.content);
                    $(updates).insertAfter("#" + id + " .reload_button");
                    // Works if there's no external content
                    $("#" + id).scrollTop($("#" + id).scrollTop() + $(updates).height());
                }
            }
        });

Update: I've tried using .load() to wait until the content as fully loaded:

(...)
var updates = build_posts(data.response.posts).hide();
$(updates).insertAfter("#" + id + " .reload_button");
console.log("Waiting for DOM to load completely @ " + new Date().getTime());
updates.ready(function() {
    console.log("Done @ " +开发者_开发百科 new Date().getTime());
    $(updates).show();
    (...)

It was apparently loaded the same millisecond that it inserted the content, which can't be right since it had to load an image as well. Am I making an obvious mistake here?

Update: using .load instead of .ready just causes the callback function never to run at all. The documentation says that it's buggy and might not be called if the images were cached by the browser, but I don't know if this is really what's happening.

I ultimately solved this with Alexander Dickson's waitForImages jQuery plugin. I don't know why .load() refused to work, but so far this plugin has had no issues, so I'm sticking with it.

You can take a look at the masonry-jquery plugin there is a function imageloaded that meets your requirement.

You can't really control the order of items loading in a page. Sure, you could load the images first, using JavaScript and put them in the cache first, but you'd have to parse the incoming HTML before inserting it into the DOM to make this work.

You may want to experiment with rendering to a hidden Iframe, then copying the content from there into your page after it renders there.

If these images are in the initial markup, then you should be able to run your code within a load event handler. The load event should only be triggered once all content (including images) is loaded.

If there is a known maximum height of the content then you could simply style your page to allow for it to load content somewhere without disturbing the page.

Here is a very simple jsFiddle example that when you scroll down the page and and click an item (arbitrary event) to "load" the top content, the scroll position is not affected.

In addition to success and error $.ajax also has a complete handler that executes code on completion of the ajax call. Don't really have an example that would be relevant to your code, and I'm not sure it's what you are looking for or if you have already checked it out, but I'm thinking if you ran your function in the complete handler instead of the success handler the images should already be loaded and ready to go.