IE6模拟max-width对图片动态缩放
来源：Arting365.com    作者：    发布时间：2007-11-08
       在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造成的消耗。
本篇编辑：Iris
发表评论 | 查看所有评论
用户名: 
验证码: