Как запустить код jQuery, как только загрузится добавленное изображение?

Question

Я добавляю изображения в div следующим образом:

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

Когда это происходит, происходит небольшая задержка, затем изображение начинает загружаться.Я хочу показать gif загрузки (в том же content_div) во время небольшой задержки, которая затем исчезнет, ​​как только изображение начнет загружаться.Я знаю, как выбрать и удалить gif загрузки, но к какому событию я привязываю код удаления, чтобы он запускался, когда образ начинает загружаться?

РЕДАКТИРОВАТЬ: код добавления изображения запускается несколько раз,поэтому content_div заканчивается несколькими изображениями.

Answer 1

Может быть, что-то вроде этого:

function showLoading() {
   ...
}

function hideLoading() {
   ...
}

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

Answer 2

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

Это нормально? Он покажет загрузчик, пока изображение не будет готово