网页中的图片缩放(onload)与网址错误(onerror)

今天搞定了个很奇怪的问题,特此分享出来.

就是html中img的缩放(使用onload属性),和显示默认图片(使用onerror属性),关于这个,网络上已经有大堆的说明,

同样的内容,我不再多说了,只说我的问题.

两个问题

1.使用onerror属性时,chrome下并不加载默认图片,我在开发工具里看时,src属性已经变了,但图片并不显示,在工具里点下src属性再回车(相当于编辑了下),默认图片便显示了,ie下无此情况,我之前也没有遇到这个情况.真正原因还没弄清楚.

此外,这个onerror会造成ie6堆栈溢出,就是默认图片路径不对,或网络问题加载不到时.

2.图片等比缩放(不等比的缩放实在难看).并且居中.左右的容易办,外面框的宽度定了,给一个css text-align:center,就OK了.上下居中我不习惯用标签内联属性,所以采用margin解决.

下面上我使用的两个小函数

//图片加载完成后按最大宽高等比缩放
function resize(o,mw,mh){
	var ow=o.width,oh=o.height,os=ow/oh,w=mw||100,h=mh||100,s=w/h;
	o.setAttribute('oldheight',oh)
	if(os>s){
		if(ow>w){
			o.width=w;o.height=w/os;
		}
	}else{
		if(oh>h){
			o.height=h;o.width=h*os
		}
	}
	if(o.height<h){
		o.style.marginTop=(h-o.height)/2+'px'
	}
}
//图片加载出错时替换成默认图片,同时也解决了ie6的over stack问题
function errorload(o,src,mw,mh){
	var w=mw||100,h=mh||100;
	var img=new Image();
	img.src=src;
	img.width=w;
	img.height=h;
	o.parentNode.replaceChild(img, o)
}

使用时直接在img标签内写上

<img src="原始图片路径" onload="resize(this,最大宽,最大高)" onerror="errorload(this,'默认图片路径',最大宽,最大高)" alt="*" />

这里最大宽高可以不指定,默认在函数里设为100,也可根据自己的情况修改函数.

2011-12-10更新

后来发现，opera和firefox等浏览器中，当img的src属性为空时，不会触发onerror事件，所以，在进行处理时一定要考虑到这种情况，可以判断下图片地址为空时，就直接返回错误图片，或者返回错误字符，就可以引发onerror事件了。