Detecting when HTML image source update is done

Question

I'm using jQuery to update an image source

$("#myImage").attr("src", imagePath);

Immediately after, I try to detect the image's width with

$("#myImage").width();

Looks like sometimes (especially on first update) the update is not done, and I get invalid data.

Is there a way to make sure the image finished loading?

Answer 1

$.load(); will fire on the image when it's finished loading:

$("img.myImage").load(function(){
  alert("My width is " + $(this).width());
});

Source: http://api.jquery.com/load-event/

Answer 2

The image has a onload event like the document's body.

Make sure you set that event before you change the src.