23

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 <img/> tag and detect when the loading of a new images has finished.

wuerfelfreak
  • 2,118
  • 1
  • 10
  • 24
Francisc
  • 66,160
  • 57
  • 172
  • 264

7 Answers7

41
$('img').on('load', function() {
    // do whatever you want
});
Matthew
  • 7,831
  • 11
  • 56
  • 80
  • Hey, thanks Matt. Does that handler fire each time a new src is set for the img tag? (much like a value commit) – Francisc Dec 20 '10 at 22:09
  • 3
    that will not work if the image is in the DOM already when you assign the handler, and the cached version is used.. – Gabriele Petrioli Dec 20 '10 at 22:09
  • The tag will already be in the DOM when the handler is required. – Francisc Dec 20 '10 at 22:10
  • No I didn't try, I'll implement it after I am sure it's what I need. :) – Francisc Dec 20 '10 at 22:10
  • @Gaby: It should work whether cached or not. The more critical issue is making sure you've hooked the event *before* the image has loaded: http://stackoverflow.com/questions/2832953/jquery-check-when-image-is-loaded/2833076#2833076 – T.J. Crowder Dec 20 '10 at 22:17
  • @T.J.Crowder, i mean the image you want to load.. not an empty tag. If you put an `src` in the image tag, then if the image is cached the load event fires before you have time to assign it.. example http://www.jsfiddle.net/gaby/Xdeh4/ (*first image does not fire the load event*), but re-reading the question i see that the OP has specific requirements that do not face this problem, as he is interested in changing the `src` of an existing tag. – Gabriele Petrioli Dec 20 '10 at 23:34
  • 4
    @Gaby: As I said, *"...the more critical issue is making sure you've hooked the event **before** the image has loaded."* – T.J. Crowder Dec 21 '10 at 06:46
6

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)

Pikrass
  • 6,169
  • 26
  • 24
4

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.

bardu
  • 705
  • 1
  • 8
  • 23
4

I think this looks a bit cleaner

$('img').load(function() {
    // Your img has finished loading!
});
Henrik
  • 544
  • 7
  • 17
3

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

bejonbee
  • 5,161
  • 3
  • 32
  • 39
2

From a very similar question Official way to ask jQuery wait for all images to load before executing something and just like Pikrass says:

With jQuery, you use $(document).ready() to execute something when the DOM is loaded and $(window).load() to execute something when all other things are loaded as well, such as the images.

Here are two examples:

DOM

jQuery(document).ready(function(){
    console.log('DOM ready');
});

Images / Everything Else

jQuery(window).load(function(){
    console.log('all other things ready');
});

You should be able to confirm in your console:

screenshot-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png

Community
  • 1
  • 1
cwd
  • 47,510
  • 50
  • 154
  • 194
0

Everyone mentioned that the event should be fired before set to the src.

But if you don't want to worry about it, you can use the oncomplete event (will be fired even with cached images) to fire onload, like this:

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

Using jQuery you don't have to worry about backward compatibility (eg: img.height>0 in IE)

Tom Sarduy
  • 16,482
  • 8
  • 64
  • 83