Question

After I make an ajax request by doing something simple like $(element).load(url, callback); there will be new content on the page that includes images and such.

Is there a way to do something similar to $(window).load(callback) after the new content has finished loading?

$(window).load(); works nicely when the page is fresh so that you can show a load animation until all content is loaded, but something simple like this seems to be missing for when content is loaded after $(window).load() has already been triggered.

EDIT 6/6/12 11:55pm: I think everyone is misunderstanding my question. Let me explain a little better:

When you first load a page, you can take advantage of these two events with jQuery: $(document).ready(); and $(window).load();. The first one fires when the DOM is ready and the second one fires when content is done being loaded (images, etc). After updating the page using jQuery’s .load() method, I am fully aware that I can pass a callback to be executed after the Ajax is completed.

That is not what I want. I want to execute a function after the new content is finished loading, similar to when $(window).load(); fires after a page’s initial content has finished loading.

Does that make sense? How can we create an event similar to $(window).load(); for doing stuff after Ajax’ed content is done loading (not just after the HTML has been inserted)?

Answer 1

According to jQuery:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

So, after the DOM has been updated (with Ajax’ed content for example), I am setting a listener for the ‘load’ events on all newly inserted images:

function when_images_loaded($img_container, callback) { // do callback when images in $img_container (jQuery object) are loaded. Only works when ALL images in $img_container are newly inserted images and this function is called immediately after images are inserted into the target.
    var _imgs = $img_container.find('img'),
        img_length = _imgs.length,
        img_load_cntr = 0;

    if (img_length) { //if the $img_container contains new images.
        _imgs.on('load', function() { //then we avoid the callback until images are loaded
            img_load_cntr++;
            if (img_load_cntr == img_length) {
                callback();
            }
        });
    }
    else { //otherwise just do the main callback action if there's no images in $img_container.
        callback();
    }
}

This is nice for allowing content to remain hidden until images are ready. If you have background images that will be showing as background images, this won’t work. A workaround would be to load all the images that you are using in your CSS styles into a container that will remain hidden so that the above function will allow you to load the images. Once all the images are loaded, you can remove the element that contains your CSS-only images and that way the browser will render backgrounds (etc) instantaneously when you unhide your content.