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

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

что-то вроде этого будет в HTML:

<img id="photo"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

есть ли способ для меня, чтобы определить, если src на img тег был загружен?

мне это нужно, потому что я столкнулся с проблемой, если $(document).ready() выполняется до загрузки браузера изображение. $("#photo").width() и $("#photo").height() возвращает размер заполнителя (alt-текст). В моем случае это что-то вроде 134 х 20.

прямо сейчас я просто проверяю, если высота фотографии меньше 150, и предполагая, что если это так, то это просто текст alt. Но это довольно Хак, и он сломается, если фотография меньше 150 пикселей в высоту (вряд ли в моем конкретном случае), или если текст alt больше 150 пикселей в высоту (возможно, это произойдет в небольшом браузере окно.)

Edit: для тех, кто хочет увидеть этот код:

$(function()
{
  var REAL_WIDTH = $("#photo").width();
  var REAL_HEIGHT = $("#photo").height();

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(REAL_HEIGHT < 150)
    {
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
      if(REAL_HEIGHT < 150)
      {
        //image not loaded.. try again in a quarter-second
        setTimeout(adjust_photo_size, 250);
        return;
      }
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

обновление: Спасибо за предложения. Существует риск того, что событие не будет уволено, если я установлю обратный вызов для $("#photo").load событие, поэтому я определил событие onLoad непосредственно на теге изображения. Для записи, вот код, с которым я закончил:

<img id="photo"
     onload="photoLoaded();"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

затем в Javascript:

//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
  isPhotoLoaded = true;
}

$(function()
{
  //Hides scrollbars, so we can resize properly.  Set with JS instead of
  //  CSS so that page doesn't break with JS disabled.
  $("body").css("overflow", "hidden");

  var REAL_WIDTH = -1;
  var REAL_HEIGHT = -1;

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(!isPhotoLoaded)
    {
      //image not loaded.. try again in a quarter-second
      setTimeout(adjust_photo_size, 250);
      return;
    }
    else if(REAL_WIDTH < 0)
    {
      //first time in this function since photo loaded
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});