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

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

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

<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';
}
}
}


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

缺点是,如果有失效的链接,能转到默认的图片是不错,但是感觉还是闪了一下(显示红叉叉,然后再加载默认图片),怎么避免呢?
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值