技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 一个兼容多种场合的Javascript图片大小自适应function

一个兼容多种场合的Javascript图片大小自适应function

浏览:2531次  出处信息

在实际应用中,图片自适应大小结合水平垂直居中,是非常常用的手段。今天就图片的自适应这里推荐一个方法,此方法已经通过多种常见场合和各大浏览器兼容性的测试。

先看方法:

/*
  1. * auto resize image
  2. * @param    img     img obj
  3. * @param    w       custom width
  4. * @param    h       custom height
  5. */
  6. function resizeImage(img,w,h) {
  7.     //remove default attribute
  8.     img.removeAttribute("width");
  9.     img.removeAttribute("height");
  10.     var pic;
  11.     //if is ie
  12.     if(window.ActiveXObject) {
  13.         var pic=new Image();
  14.         pic.src=img.src;
  15.     } else pic=img;
  16.     if(pic && pic.width && pic.height && w) {
  17.         if(!h) h=w;
  18.         if(pic.width>w||pic.height>h) {
  19.             var scale=pic.width/pic.height,fit=scale>=w/|>h;
  20.             if(window.ActiveXObject) img=img.style;
  21.                 img[fit?'width':'height']=fit?w:h;
  22.             //if is ie6
  23.             if(window.ActiveXObject)
  24.                 img[fit?'height':'width']=(fit?w:h)*(fit?1/scale:scale);
  25.         }
  26.     }
  27. };

这个方法一共测试了3种场合:

场合1,直接作用在img标签上:

<img src=”http://img.china.alibaba.com/images/trade/other/091231/test1.jpg” width=”400″ height=”900″ onload=”resizeImage(this,400,300)” />

场合2,对现有标签重置src属性:

<img id=”test2″ src=”about:blank” />

var test2=document.getElementById(’test2′);

test2.onload=function(){ resizeImage(test2,400); };

test2.src=’http://img.china.alibaba.com/images/trade/other/091231/test2.jpg’;

场合3,动态加载img:

var test3=new Image();

test3.onload=function(){ resizeImage(test2,300); };

test3.src=’http://img.china.alibaba.com/images/trade/other/091231/test3.jpg’;

document.appendChild(test3);

以上3种所演绎的情况在技术层面的差别主要有:

1. img是否存在与页面上,在ie6下,对不存在页面上的img的宽高自适应,对2个属性都必需进行设定。

2. img是否自带width, height属性,在不删除原有属性的前提下,通过js设定图片的宽高将会失效

3. img在onload的过程中是否可见,在ie6下,对不可见的img在onload中无法获取图片的宽高属性。

同时需要注意的是,在Opera和Chrome浏览器下,没有设置宽高属性的图片是在DOM Ready之后进行load的,所有请使用此方法的同学注意方法调用的时机。

建议继续学习:

  1. 图片动态局部毛玻璃模糊效果的实现    (阅读:13592)
  2. 淘宝图片存储架构    (阅读:9838)
  3. iframe大小自适应    (阅读:8805)
  4. 解决IE6从Nginx服务器下载图片不Cache的Bug    (阅读:7099)
  5. When we`re only No.2, we try harder之聊天表情设计小探讨    (阅读:6508)
  6. 精于图片处理的10款jQuery插件    (阅读:6221)
  7. phpThumb:强大的缩微图类    (阅读:5461)
  8. js实现预加载图片让图片快速显示    (阅读:4963)
  9. 利用开源的Gearman框架构建分布式图片处理平台[原创]    (阅读:4259)
  10. 使用数据库存放图片    (阅读:4187)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1