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?

score 4 · Accepted Answer · answered Jan 16 '10 at 00:13

4

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

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

answered Jan 16 '10 at 00:13

Sampson

2

Indeed it will. Sadly I tested it before answering... :) Beat me to it. +1 – Doug Neiner Jan 16 '10 at 00:15
...me too :( - http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-something is a similar case. – bobwah Jan 16 '10 at 00:16

score 0 · Answer 2 · answered Jan 16 '10 at 00:13

0

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

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

answered Jan 16 '10 at 00:13

Pekka

2 Answers2