[jQuery] wait until dynamically generated image has fully loaded

[bytte]

I've been searching through this list for a few hours already and
trying and trying but I can't find the answer to my question. Let me
describe what I'm trying to do.

I display an image. When you click a text link, an ajax call gets
fired. The ajax call queries a mysql database to find the link to
another image. When the ajax call is successful, the currently
displayed image should be replaced by the new image.

Everything works, but I want the image only to be displayed when it is
fully loaded and I really don't know how to do that. So currently I'm
doing this:

$.ajax({
     type: "GET",
     url: "item.php",
     data: "somedata to send along to the page",
     dataType: "json",
     beforeSend: function(){showLoading();},
     success: function(json){showNewPic(json);}
     });

function showLoading() {
     $('.jq_loading').fadeIn("fast");
     }

function showNewPic(json) {
     $('.jq_loading').hide();
     $('.currentpic').fadeOut("fast",function() {
          $('.currentpic').attr({ src: "../layout/images/uploads/"
+json.picture}).fadeIn("fast");
     });
}

This looks good when the browser has cached the new image already. The
old one fades out and the new one fades in. But the animation looks
NOT good when the image hasn't yet loaded. So basically the loading
image (.jq_loading) should still be displayed as long as the new image
hasn't fully loaded. When it's fully loaded the fadeIn should start.

I've been looking into solutions but most of them use the
window.onload method which is not ok here as I don't know the url to
the image yet until the user clicked the text link.

I hope this makes sense. Any help greatly appreciated as I'm currently
going crazy over this.