How can I run jQuery code as soon as an appended image begins loading?

I am appending images to a div like this:

$('#content_div').append('<img src="/images/default_pic.jpg" />') 

When this occurs, the开发者_JS百科re is a slight delay, then the image starts loading. I want to show a loading gif (in the same content_div) during the slight delay, which then would dissappear as soon as the image starts loading. I know how to select and remove the loading gif, but to what event do I bind the removal code so that it is run when the image begins to load?

EDIT: The image adding code is run multiple times, so the content_div ends up with multiple images.

Maybe something like this:

function showLoading() {
   ...
}

function hideLoading() {
   ...
}

...
showLoading();
$("<img>")
  .bind("load error", hideLoading)
  .attr("src", "/images/default_pic.jpg")
  .appendTo('#content_div');
...

    $("#content_div").html("<img src='ajax-loader.gif' />");
    $("#content_div").empty();
    $('#content_div').append('<img src="/images/default_pic.jpg" />');

That ok? It will show a loader until the image is ready