How do I call a method when an image has been fully loaded and rendered?

Question

I need to call a method after an image has been loaded and fully rendered in the browser.

Quick example for a big image:

<img width="500px" src="http://www.digivill.net/~binary/wall-covering/(huge!)14850x8000%2520earth.jpg">

My method should be called when the picture is fully visible.

@RajaprabhuAravindasamy I am trying smt like this http://jsfiddle.net/2cLm4epv/4/ but does not work — GibboK, Oct 06 '14 at 10:00
@GibboK Use this http://jsfiddle.net/2cLm4epv/5/ I think the reason for why your fiddle not working is the invalid html. Image tag should be a self closable one. — Rajaprabhu Aravindasamy, Oct 06 '14 at 10:03
@RajaprabhuAravindasamy please add it as an answer so I can accept it. Thanks — GibboK, Oct 06 '14 at 11:09
I have a similar question here, any suggestion is very appreciate thanks http://stackoverflow.com/questions/26215434/how-to-call-a-method-when-an-image-has-been-loaded-and-rendered-after-adding-it — GibboK, Oct 06 '14 at 11:38

score 2 · Accepted Answer · answered Oct 06 '14 at 11:12

As we discussed in the comments use the .load() function along with its call back to accomplish your task,

HTML

<img id="bigimage" width="500px" src="http://www.digivill.net/~binary/wall-covering/(huge!)14850x8000%2520earth.jpg"/>

JS

$('#bigimage').load(function(){
    alert('loaded and redered');
});

1 Answers1