javascript - assign event to div when it has loaded fully

Question

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.

Answer 1

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})