Can I assign an event to a div to fire when all elements of the containing div have loaded fully? eg. if the div contains an image, fire an event on the div when the image has loaded fully. I am using jquery.

Can I assign an event to a div to fire when all elements of the containing div have loaded fully? eg. if the div contains an image, fire an event on the div when the image has loaded fully. I am using jquery.

• javascript
• jquery

5 Answers 5

Not sure how you're dynamically adding your content, but this example should illustrate how it could work.

It is using .append() to simulate your dynamically loaded content. Then after the append, it uses .find() to find the images, and .load() to attach a load handler to them.

Finally, it returns the length property of the images. Then in the load handler, as the images finish loading, the length is decremented. Once it gets to 0, all the images are loaded, and the code inside the if() runs.

Example: http://jsfiddle.net/ehwyF/

var len = $('#mydiv').append('<img src = "http://dummyimage.com/150x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/160x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/170x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/180x90/f00/fff.png&text=my+image" />')
    .find('img')
    .load(function() {
        if( --len === 0) {
            alert('all are loaded');
        }
    }).length;

This way, the code runs based only on the images in #mydiv.

If there are any images in there that were not dynamic, and therefore shouldn't get the .load() event, you should be able to add a .not() filter to exclude ones the complete property is true.

Place this after the .find() and before the .load().

.not(function(){return this.complete})

If it's just one image you're wanting to wait for you can load the image with ajax and then trigger the event in the ajax callback.

It's hard to check it for just one div, but may I suggest using $(window).load() to check if all the images have loaded?

UPDATE: If you using ajax then use the callback to see when the json has loaded, and then attach $("div#id img").load() to see when all the images have loaded. Only problem with this is that I have noticed when the image is cached, the loader does not get triggered. :(

To add to Shadow Wizard's idea, you could try the following code:

var totalImages = $(".yourImageClass").length;
var loadedImages = 0;
$(".yourImageClass").bind("onload", function() {
    loadedImages++;
    if (loadedImages == totalImages) {
        //all images have loaded - bind event to DIV now
        $("#yourDiv").bind(eventType, function() { 
            //code to attach 
        });
    }
});

Catch the onload event of all images in the div, in there raise some global counter by 1. If that counter is equal to the amount of images in the div... all images finished loading. Should be simple using jQuery.

This will work only for images though, other elements don't have onload event.