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

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

まずは、html側

1. <div id="imgdiv">  
2. <img border="0" id="img" loading="lazy" src="wait.png">  
3. <input type="button" value="Next" onclick="loadimage('foo.png');">  
4. </div>  

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

javascript 側

1. function loadimage(linkname){  
2.  document.getElementById('imgdiv').innerHTML = '<img src="' + linkname +'" border=0 id="img" onload="setimagesize();" style="display:none;"/>';  
3. }  
4.   
5. function setimagesize(){  
6.  var image = document.getElementById('img');  
7.   
8.  image.style.display = 'block';  
9.   
10.  if( image.width > 800 ){  
11.   image.width = 800;  
12.  }  
13.   
14.  if( image.height > 600 ){  
15.   image.height = 600;  
16.  }  
17. }  

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 で確認