価格.com - 焼酎 フード・ドリンク 定番検索キーワードランキング

価格.com - 焼酎 フード・ドリンク 定番検索キーワードランキング
http://kakaku.com/food_drink/ss_0016_0026/0002/ranking/keyword/

なんか写真がポコポコ小さくなっていく。
へんな動きでちょっと気になったので追ってみる。

へんな動きする画像のimgタグ

<img src="http://imgb.dena.ne.jp/exb5/cb/10/6146986/8/96442680_1.JPG" alt="森伊蔵" onload="ImageFileChange(this)" onerror="setNoImage(this)">

imgタグのonload属性で指定されているImageFileChange()

function ImageFileChange(ObjImage){
	blnRet = false;
	if(ObjImage != null){
		//NowPrinting画像であるか否かをチェック
		if(ObjImage.src != ObjNowPrinting.src){
			blnRet = true;
		}
	}
	//NowPrinting画像でない場合のみ、リサイズチェックを行ないます。
	if(blnRet == true){
		ImageResize(ObjImage);
	}
}

imgオブジェクトがあれば呼び出されるImageResize

function ImageResize(ObjImage) {
	var ImgW = ObjImage.width;		//読み込んだ画像の横幅
	var ImgH = ObjImage.height;		//読み込んだ画像の縦幅
	var Per = 1.0;		//横幅,縦幅の規定値に対する実際の値の比率
	var Value = 1.0;	//比率による横幅,縦幅のサイズ調整後のピクセル値

	if(ImgW==ImgH) {	//横幅 と 縦幅 が同一の場合
		//80*80pxで統一
		ObjImage.height = 80;
		ObjImage.width = 80;
	} else if(ImgW < ImgH && ImgH != 0 && ImgW != 0) {	//横幅 < 縦幅 で どちらも0pxでない場合
		Per = (80/ImgH);
		Value = ImgW*Per;
		if( Value > 60){
			Value = 60;
		}
		ObjImage.width = Value;
		ObjImage.height = 80;
	} else if(ImgW > ImgH && ImgH != 0 && ImgW != 0){	//横幅 > 縦幅 で どちらも0pxでない場合
		Per = (80/ImgW);
		Value = ImgH*Per;
		if( Value > 60){
			Value = 60;
		}
		ObjImage.width = 80;
		ObjImage.height = Value;
	} else { // 念のため
		if(ImgH == 0 && ImgW == 0){
			ObjImage.src = ObjNowPrinting.src;
		}
	}
}

ということでした。

imgタグにonloadってはじめて見た。わりと使われてるんだろうか？
そもそもこの処理だと80x60あるいは60x80でしか表示できないな。
元画像がおかしな縦横比だったら画像はゆがんで表示されるね。

まぁなんせ処理が遅い気がするけど、なんだろう？