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

Answer 2

It's hard to check it for just one div, but may I suggest using $(window).load() to check if all the images have loaded?

UPDATE: If you using ajax then use the callback to see when the json has loaded, and then attach $("div#id img").load() to see when all the images have loaded. Only problem with this is that I have noticed when the image is cached, the loader does not get triggered. :(

Answer 3

如果它只是一个你想要等待的图像，你可以用ajax加载图像，然后在ajax回调中触发事件。

Answer 4

To add to Shadow Wizard's idea, you could try the following code:

var totalImages = $(".yourImageClass").length;
var loadedImages = 0;
$(".yourImageClass").bind("onload", function() {
    loadedImages++;
    if (loadedImages == totalImages) {
        //all images have loaded - bind event to DIV now
        $("#yourDiv").bind(eventType, function() { 
            //code to attach 
        });
    }
});

Answer 5

Catch the onload event of all images in the div, in there raise some global counter by 1. If that counter is equal to the amount of images in the div... all images finished loading. Should be simple using jQuery.

This will work only for images though, other elements don't have onload event.