Determine When Image Finished Loading With Javascript Or Jquery:

How can I detect with JavaScript or jQuery when an image has finished loading, be it from the server or the browser cache? I want to load various images in the same ta

Solution 1:

$('img').on('load', function() {
    // do whatever you want
});

Solution 2:

The onload document's event will fire only after all the elements, images included, have fully loaded.

The onload <img>'s event will fire after the single image have fully loaded.

So you can attach a listener to these events, using jQuery objects or DOM's addEventListener (and IE's attachEvent)

Solution 3:

Well, this is quite an old thread I came across yesterday. I'm using backbone.js and require.js and resizing my layout always caused problems with views that contain images.

So, I needed a way to know when the last image has finished loading to resize the layout. All, mentioned solutions above didn't work in my case. After some hours of more investigation I found the ultimate solution that is working:

http://desandro.github.com/imagesloaded/

Hope that helps others as well.

Solution 4:

I think this looks a bit cleaner

$('img').load(function() {
    // Your img has finished loading!
});

Solution 5:

For a more thorough image load detection, including images loaded from cache, try this: https://github.com/paulirish/jquery.imgloaded