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.

For images and iframes, you can use `load` event... – dashtinejad Oct 21 '14 at 07:15 — dashtinejad, Oct 21 '14 at 07:15

score 10 · Accepted Answer · answered Oct 21 '14 at 07:18

10

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.

answered Oct 21 '14 at 07:18

dashtinejad

6,127
3
26
43

Thanks. I will try it. – Ian Y. Oct 21 '14 at 07:23
Not sure if I missed something, but the function doesn't seem to fire when the number of `img` and `iframe` is 0. – Ian Y. Oct 24 '14 at 06:22
1

@IanY. Yes, you are correct, You should check for that: `if (elemsCount == 0) { alert('no element at all'); }` – dashtinejad Oct 25 '14 at 05:12

score 1 · Answer 2 · edited May 23 '17 at 10:27

1

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?

edited May 23 '17 at 10:27

Community

1
1

answered Oct 21 '14 at 07:20

brtb

2,001
5
33
52

Thanks for the info. Actually I don't need to care about flash. My OP has been updated. – Ian Y. Oct 21 '14 at 07:22

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

2 Answers2

Linked