div is filled dynamically with html after main page loads- how to determine it has been loaded

Question

I inherited a project where a page is loaded, then code attached to that page fills in a div with dynamically generated html - it basically fills an existing div with a html string.

This string contains links to images, etc.

I want to tell when all the images, etc have loaded- I cannot seem to get any jQuery standard checks to work - ie I have tried attaching $(window).load() after the dynamic stuff has been inserted.

I am wondering if I should write $(window).load() dynamically as well, or if there is any other method- ie $("#thediv").load (doesn't seem to work. I cannot query all the new html for image tags, etc- too much stuff is being put in.

Answer 1

$(window).ready() only applies to the content within the HTML file and you can only use load to attach an onload event handler to a specific image (not a container), something like this might work for you.

window.ImageLoadHandled = false;
window.ImageLoadCount = 0;

function ImageLoadHandler() { 
    // guard against calling this function twice
    if(window.ImageLoadHandled) return;
    window.ImageLoadHandled = true;

    // All images have loaded || timeout expired...
}

$("#myAjaxedDiv img").load( function() {
    window.ImageLoadCount++;
    if( window.ImageLoadCount == $("#myAjaxedDiv img").length ) {
        // all images in #myAjaxedDiv have loaded
        ImageLoadHandler();
    }
});

// if images haven't loaded after 5 seconds, call the code
setTimeout( ImageLoadHandler, 5000 )

The only problem with this is that if an image fails to load for whatever reason, the code will never be hit, which is quite risky. To counteract this I'd recommend creating a setTimeout() method to call your code after a few seconds timeout in-case there is a problem loading images (client or server side) and I've also taken @TrueBlueAussie's correction into account in the edit .

Your alternative is to preload the images with your HTML page

Answer 2

The $(window).load() doesn't work for dynamic content as far as I know. You can use the .load event for each image separated. Here's an example:

var container = $("<div> ... Stuff ... </div>");
var images = container.find('img');
var imageIdx = 0;
images.load(function(){
    imageIdx++;
    if (imageIdx == images.length){
        callback();
    }
});

Where callback() is the function that runs after all images where loaded.

Answer 3

From my comment: window load applies to the initial page load only. Not dynamic loading of content within it. Attach load handlers to each loaded image element and count them.

This is the shortest version I could come up with for you:

// After HTML load finishes
var img = 0;
var imgCount = $("#thediv img").load(function(){
    if (++img == imgCount){
        // We are done loading all images!
    }
}).length;