How to know if all elements in a DIV have been fully loaded?

Question

There is a div in which there will be some elements (images, iframe, etc) being loaded via Ajax. After those elements have been fully loaded, I need to execute a function for the div.

How do I determine if all elements in the div have been fully loaded?

I use jQuery as the library.

Answer 1

For images and iframes you can use load event:

// get all images and iframes
var $elems = $('#div').find('img, iframe');

// count them
var elemsCount = $elems.length;

// the loaded elements flag
var loadedCount = 0;

// attach the load event to elements
$elems.on('load', function () {
    // increase the loaded count 
    loadedCount++;

    // if loaded count flag is equal to elements count
    if (loadedCount == elemsCount) {
        // do what you want
        alert('elements loaded successfully');
    }
});

You should execute the above script after appending your elements via Ajax into your #div element.

Answer 2

Please elaborate your question. There are different methods for different type of elements.

For iframe follow this thread, How can I detect whether an iframe is loaded?

For image http://api.jquery.com/load-event/

for flash it depends lots of things. How can I tell if Flash is loaded on a website?