jQuery callback on img src replacement?

Question

What I am trying to do is to change an image on my webpage when the user mouses over a thumbnail of it. It is easy for me to do it this was because the thumbnail src only has 'tn_' appended to the filename and is otherwise identical.

The problem I'm having is that when I switch the src on the image the attr function returns the img dom element almost instantly while the image itself does not change until the new image loads. I want to have some sort of a callback, so that I can either change the cursor to show a loading symbol, or write loading somewhere on the page while the new image is loading.

How can I do this?

Answer 1

You can give the image a load() callback.

$('#imageID').load(function() { .... });