一个兼容多种场合的Javascript图片大小自适应function
在实际应用中,图片自适应大小结合水平垂直居中,是非常常用的手段。今天就图片的自适应这里推荐一个方法,此方法已经通过多种常见场合和各大浏览器兼容性的测试。
先看方法:
-
* auto resize image
-
* @param img img obj
-
* @param w custom width
-
* @param h custom height
-
*/
-
function resizeImage(img,w,h) {
-
//remove default attribute
-
img.removeAttribute("width");
-
img.removeAttribute("height");
-
var pic;
-
//if is ie
-
if(window.ActiveXObject) {
-
var pic=new Image();
-
pic.src=img.src;
-
} else pic=img;
-
if(pic && pic.width && pic.height && w) {
-
if(!h) h=w;
-
if(pic.width>w||pic.height>h) {
-
var scale=pic.width/pic.height,fit=scale>=w/|>h;
-
if(window.ActiveXObject) img=img.style;
-
img[fit?'width':'height']=fit?w:h;
-
//if is ie6
-
if(window.ActiveXObject)
-
img[fit?'height':'width']=(fit?w:h)*(fit?1/scale:scale);
-
}
-
}
-
};
这个方法一共测试了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的,所有请使用此方法的同学注意方法调用的时机。
建议继续学习:
- 图片动态局部毛玻璃模糊效果的实现 (阅读:13592)
- 淘宝图片存储架构 (阅读:9838)
- iframe大小自适应 (阅读:8805)
- 解决IE6从Nginx服务器下载图片不Cache的Bug (阅读:7099)
- When we`re only No.2, we try harder之聊天表情设计小探讨 (阅读:6508)
- 精于图片处理的10款jQuery插件 (阅读:6221)
- phpThumb:强大的缩微图类 (阅读:5461)
- js实现预加载图片让图片快速显示 (阅读:4963)
- 利用开源的Gearman框架构建分布式图片处理平台[原创] (阅读:4259)
- 使用数据库存放图片 (阅读:4187)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:Denis 来源: 阿里巴巴(中文站)用户体验设计部博客
- 标签: 图片 自适应
- 发布时间:2010-03-31 09:24:22
- [54] IOS安全–浅谈关于IOS加固的几种方法
- [52] android 开发入门
- [52] 如何拿下简短的域名
- [51] 图书馆的世界纪录
- [49] Go Reflect 性能
- [49] Oracle MTS模式下 进程地址与会话信
- [47] 【社会化设计】自我(self)部分――欢迎区
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [36] 程序员技术练级攻略
- [29] 视觉调整-设计师 vs. 逻辑