Javascriptで画像のサイズを取得

Javascriptで画像のロード後の縦横のピクセルを取得する方法(jQuery使用)。
単純な物だしjQuery無しでも出来ると思うけど、主に動的に画像をロードしてdivのサイズとか決定したり、画像の横幅がわからないのに、cssでmargin: auto;したい時に使う。

  var img = $("#img"); // 画像のidからオブジェクトを取得

  // 画像のロードイベント(つまり画像のロードが完了したら発動
  $(img).load(function(){
    var width = $(this).width();
    var height = $(this).height();

    window.alert("width:" + width + ", height:" + height);
  });

画像のロード完了前に同じ事をしても、ロード前なので画像のサイズは取得出来ない。0とかが返って来るはず。img要素のloadイベントはsrcで指定した画像のロードが完了した時点で発動するみたい。

コメントを残す