[解決済み] 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以下かどうかだけチェックして、150以下ならaltテキストだけと仮定しています。 しかし、これはかなりのハックで、写真の高さが 150 ピクセル未満である場合 (私の特定のケースではありえない)、または alt テキストの高さが 150 ピクセル以上である場合 (小さなブラウザ ウィンドウで発生する可能性がある) には、破損します。

編集します。 コードを見たい人のために。

$(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 イベントにコールバックを設定するとイベントが発生しない恐れがあるので、image タグに直接 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));
  }

});

どのように解決するのですか？

イベントリスナーを追加するか、onloadで画像が自らアナウンスされるようにします。そして、そこから寸法を割り出す。

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