img显示缩小后的图片

1.正确做法(见工程微博系统microbolg的发表微博的图片预览模块)

处理方法，进行图片预加载
方法一、用javascript写的事件处理 (其实方法一和方法二都一样只是方法二是用jquery写的)

<img id='img' src='index/makePreviewImage.jsp' width=0 height=0 οnlοad='loadImage(this)'></img>

function loadImage(obj)   //<img>加载url事件调用的函数

{

      var   img =   new   Image();  //图片预加载

    img.src=obj.src;     

    obj.width=img.width*200/img.height; //这里的img.width和img.height为原图大小

    obj.height=200;

}

方法二、用jquery写的事件处理  (自己做的微博系统用该种方法)

<img id='img' src='index/makePreviewImage.jsp' width=0 height=0></img>

$( "#img" ).load( function (){    //<img>加载url事件

    var img = new Image();    //图片预加载

    img.src= this .src;        //this为id="img"的dom节点对象

     this .width=img.width*200/img.height; //这里的img.width和img.height为原图大小

     this .height=200;

});

注意：进行图片预加载的 var img = new Image()；必须放在onload事件中完成，否则会由于网速问题可能<img>的url没有加载，img.widht和img.height就会返回0而不是原图大小。如上面的红色字体所示，必须先设置width=0 height=0，让图片先不显示后缩小到所要的大小显示，否则会先显示图片的原图大小再按比例缩小显示。

2.错误做法

(1)先隐藏图片

<img id='img' src='index/makePreviewImage.jsp' style='display:none'></img> 

(2)用jquery的iUtil工具包获取原图的大小

(3)用jquery的attr()方法设置图片的大小width,height

(4)显示该图片

注意：上面的做法就是错在第二步，由于浏览器的缓存问题，获取图片的原图大小会出错，会得到上一次用该<img>url显示的图片的原图大小。

转载自：http://sishuok.com/forum/posts/list/7818.html