如果图片失效，则显示一个默认的图片

图片失效了之后，显示一个红叉叉，实在难看，一般的做法是现实一个默认的图片，比如提示用户“图片已经找不到”等等。

我试了一下，用下面这个可以实现

<img src="111.jpg" onerror="this.src='http://www.iteye.com/images/smiles/icon_biggrin.gif'" /> 

但是每个图片都加上这个显然不合适，那么用js实现。
我这里获取该页的全部图片了，实际操作中只有用户上传的图片才会失效，网站本身的图片一般不会。所以图片dom的时候可以适当限制一下条件，节省不必要的资源浪费。

window.onload = function(){
	var imgs = document.getElementsByTagName("img");
	for(var i=0; i< imgs.length; i++){
		imgs[i].onerror = function(){
			this.src='http://www.baidu.com/img/baidu_logo.gif';
		}
	}
}

-----------------------------------------------

缺点是，如果有失效的链接，能转到默认的图片是不错，但是感觉还是闪了一下（显示红叉叉，然后再加载默认图片），怎么避免呢？

评论

2 楼 ybhuxiao 2010-03-05  

天梯梦 写道

用php就很容易实现了！

愿闻其详，还望赐教？

1 楼 天梯梦 2010-03-05  

用php就很容易实现了！