html src タグで、指定サイズ以上の画像を縮小表示

src タグで、指定サイズ以上の画像を縮小表示しようと思い、調べてみたら、ブラウザ毎で動作がマチマチ
なので、ブラウザ依存しそーにないのを作成

まずは、html側

ここは、フツーですが、div(spanでもよいと思う)タグで、img タグを包んでおく

javascript 側

function loadimage(linkname){
 document.getElementById('imgdiv').innerHTML = '<img src="' + linkname +'" border=0 id="img" onload="setimagesize();" style="display:none;"/>';
}

function setimagesize(){
 var image = document.getElementById('img');

 image.style.display = 'block';

 if( image.width > 800 ){
  image.width = 800;
 }

 if( image.height > 600 ){
  image.height = 600;
 }
}

loadimage関数 でimgリンクをロードさせるが、div の innerHTML を全て書き換えてしまう
これは、srcプロパティのみを変更すると、ロード前に表示されていたイメージの width height 情報が保持されてしまうため、タグそのものを生成し直して、オリジナルのサイズを取得

img タグには、読み込み完了時にサイズ変更させるため、onload イベントに setimagesize(); を入れておき サイズ変更前が(IEで)表示されないように style=display:none で生成する

後は、setimagesize関数 で、style=diplay:block で表示させ、直後にサイズを変更(サイズを変更後に表示させると、IEで正しいサイズが取得できなかったりする)

firefox12, ie8, Opera11 で確認