How to know when an image load completes

Question

Possible Duplicate:
JavaScript: Know when an image is fully loaded

I have this code:

$("#imageOnPage").attr("src", urlString);

I need to somehow fire an event after the image becomes visible on the screen. In other words I need an onLoad event for the image.

possible duplicate of [JavaScript: Know when an image is fully loaded](http://stackoverflow.com/questions/1257385/javascript-know-when-an-image-is-fully-loaded) and [Check if an image is loaded (no errors) in JavaScript](http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript) --- please use the search before you ask a new question, [this has been asked before many times](http://stackoverflow.com/search?q=jquery+test+if+image+loaded). — Felix Kling, May 13 '12 at 18:17
Some more: http://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image-has-loaded-using-javascript-jquery, http://stackoverflow.com/questions/7712002/how-to-know-whether-or-not-a-image-has-been-loaded-using-javascript — Felix Kling, May 13 '12 at 18:20

Johannes Lumpe · Accepted Answer · 2012-05-13T18:30:05.113

4

There is actually an event for that:

$('#imageOnPage').load(function()
{
/* your code */
});

It gets fired when your image has loaded.

edited May 13 '12 at 18:30

answered May 13 '12 at 18:15

Johannes Lumpe

score 1 · Answer 2 · answered May 13 '12 at 18:16

1

You should be able to bind to the load event of the image.

$('#imageOnPage').load(function() {
    alert('image loaded');
});

answered May 13 '12 at 18:16

Nathan Taylor

score 1 · Answer 3 · answered May 13 '12 at 18:19

1

$('#imageOnPage').load(function(){
  $(this).attr('src', urlString);
});

answered May 13 '12 at 18:19

3 Answers3