Jquery — Fire event when all images have loaded within element

I needed a smooth fadeIn effect after all images had been loaded in a specific element.

I solved the problem by incrementing a load counter and executing a function when the counter reaches the number of elements to load.

load_counter = 0;
$.each(my_images, function(i, item) {
    $(item).load(function() {
        load_counter ++;
        if (load_counter == my_images.length) {
            // all items have loaded
            $("#my_element").fadeIn();
        }
    })
})
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s