How do I know if all elements in a DIV are fully loaded?

Question

There divis in which some elements (images, iframes, etc.) will be loaded via Ajax. After these elements have been fully loaded, I need to execute the function for div.

How to determine if all items have been fully loaded in div?

I am using jQuery as a library.

Answer 1

For images and frames, you can use the event load:

// 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 must execute the above script after adding your elements via Ajax to your element #div.

Answer 2

, . .

iframe , , iframe?

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

. , Flash -?