Fire event if image is finished loading

Question

Possible Duplicate:
javascript executing function after full image load

Im using JQuery to programmatically change the html img:

$('#myimage').attr('src', 'url-of-image');

That may take some time depending on the url-of-image.

How can we add an event that will trigger if the new image was loaded successfully?

https://github.com/desandro/imagesloaded, `load` doesn't work consistently in IE — Matt Whipple, Nov 22 '12 at 03:23

lukedays · Accepted Answer · 2012-11-22T03:47:48.473

4

$('#myimage').attr('src', 'url-of-image').load(function() {
   // after load
});

Edit 2: this works fine on all major browsers.

edited Nov 22 '12 at 03:47

answered Nov 22 '12 at 03:14

lukedays

personally I would set the event handler before setting the source – epascarello Nov 22 '12 at 03:32
It doesn't matter much because interpreting is way faster than fetching the URL. – lukedays Nov 22 '12 at 03:40

score 3 · Answer 2 · answered Nov 22 '12 at 03:15

3

$('#myimage').attr('src', 'url-of-image').on('load', function(){
    //image loaded
});

answered Nov 22 '12 at 03:15

Musa

personally I would set the event handler before setting the source. – epascarello Nov 22 '12 at 03:31

score 0 · Answer 3 · answered Nov 22 '12 at 03:16

0

You can use the load event as described in jQuery documentation

$('#myimage').load(function() {
  //do whatever
}

answered Nov 22 '12 at 03:16

jaudette

3 Answers3