在web2.0的站中用户互动性是很强的，例如用户留言我们可能放开img标签，允许用户外链其他站点的图片，那么我们就需要解决图片尺寸过大所带来的页面布局问题。在支持max-width属性的浏览器中，这个很容易实现，我们只需要给特定的img定义全局的样式，不定义高宽，通过限定max-width就可以保证版面不受外链大图的干扰了。遗憾的是IE6不支持这个属性，很多时候我们采用overflow的hidden来保证我们的版面不受干扰，但这个解决方式并不是十分完美，没有兼顾图片的比例问题，对用户的参与积极性有一定的影响。这里介绍我的另外一种实现方式，用JS来动态缩放图片。
核心的JS代码如下：
function resizeImage(img,width){
var image=new Image();
image.src=img.src;
var temp = image.width;
//var rate = image.width/image.height;
img.width = temp = (temp>width)?width:temp;
//img.height = Math.round(temp/rate);
img.style.display = "inline";
}
function doResize(){
if($.browser.version==6&&$.browser.msie) $("img").each(function(){resizeImage(this,100)});
}
window.onload = doResize;
实现的原理很简单，主要是resizeImage函数通过判断，然后修改了img.width属性。然后就是考虑效率优化上的一些问题了，曾经看到有人直接在img标签的onload属性里调用动态修改尺寸的做法，这显然是极大消耗的，不可取；利用CSS中的行为-expression也存在争议，可能造成浏览器死掉，我个人很少用这个方法。
这里我引用了Jquery框架，当然你可以使用其他类库或者自己来的库。目的就是在DOM元素返回以后统一进行函数处理。在此之前我对浏览器做了判断，当浏览器是ie6时才执行缩放操作，对于支持max-width属性的浏览器，我用CSS来完成对图片的限定。
考虑到外链图可能很大，如果网速慢的时候我们的脚本把图片读入到内存也需要时间，因此我在页面加载时用CSS将图片先隐藏了，当缩放完成的时候再用JS将图片显示，所以这个CSS里用hack手段来针对ie6做隐藏处理了。
img{
display:inline !important;
display:none;
max-width:180px;
}
还有一个小的优化就是尽可能不要定义图片的高宽，从我的示例中你可以看出，如果不定义高宽，那么JS只需要修改宽度，那么高度会自适应，如果定义了，那么JS需要对高宽都做等比缩放才能达到我们要的效果，这里额外增添了JS的消耗。对于用户输入带进来的高宽，那么服务端完全有能力把这个属性给过滤掉。
能不定义高度，最好不要定义，能用CSS实现的就不要用JS实现，尽可能降低JS造成的消耗。
精品推荐