CODEWITHSUNDEEP
jqueryload
Ian Y.
Ian Y.

Reputation: 2467

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

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.

Upvotes: 7

Views: 14725

Answers (2)

brtb
brtb

Reputation: 2311

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?

Upvotes: 1

dashtinejad
dashtinejad

Reputation: 6263

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.

Upvotes: 10

Related Questions