·您当前的位置:首页 > 技术教程 > JavaScript >

[JS]max-width对图片动态缩放的ie6下的应用

时间:2014-09-09 08:57酷播
[JS]max-width对图片动态缩放的ie6下的应用

在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造成的消耗。

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器