图片容错处理，利用Javascript的Onerror事件

2012年05月14日前端相关12,049次2条（来一发）

很多时候，为了让网页图片可以显示，即使出现图片不存在的时候，也可以显示一个默认的图片。就会在img的HTML上设置一个onerror的事件，其实代码是很简单的。可以简单的写一个例子：

这样子写的意思是原本是显示pic.gif，如果pic.gif显示不了，就显示nopic.gif。但是这样子也会有其他问题，如果 nopic.gif也不存在，则继续触发onerror，导致循环，故出现错误。

另外，如果图片存在，但网络很不通畅，也可能触发onerror。

所以是不建议使用这个方法来处理的，如果只是这样子写，还不如直接去掉；或者更改onerror代码为其它；或者确保 onerror 中的图片足够小，并且存在。

不过既然这个方法不行，我们还可以尝试其他方法的，方法总是人想出来的。

代码如下：

<scripttype="text/javascript">
function nofind(){
    var img=event.srcElement;
    img.src="http://www.baidu.com/img/baidu_sylogo1.gif";
    img.onerror=null; //防止一直跳动
}
</script>
<h1>调用示例：</h1>
<br />
<img src='/index/thumb.png' data-original="https://www.google.com.hk/intl/zh-CN/images/logocn.png" width="150" height="60" onerror="nofind();" />

但是如果一个页面要写多个不同的判断，还不如用参数算了，免得要写很多东西。可以演变成以下代码：

<scripttype="text/javascript">
function nofind(imgtype){
var img=event.srcElement;
if(imgtype=='google'){ //根据参数调用，显示不用的图片
    img.src="https://www.google.com.hk/intl/zh-CN/images/logo_cn.png";
}
else if(imgtype=='baidu'){
    img.src="http://www.baidu.com/img/baidu_sylogo1.gif";
}
img.onerror=null; //防止一直跳动
}
</script>
<h1>调用示例：</h1>
<br />
<img src='/index/thumb.png' data-original="https://www.google.com.hk/intl/zh-CN/images/logocn.png" width="150" height="60" onerror="nofind('google');" />
<hr />
<img src='/index/thumb.png' data-original="https://www.google.com.hk/intl/zh-CN/images/logocn.png" width="150" height="60" onerror="nofind('baidu');" />

这样子，要写多少个都可以了，就一个函数搞定。

另外可以参考下我写的一个简单的页面。【Onerror实例演示】

赏

查看 google JavaScript onerror的相关文章

转载本站原创文章请注明：文章转自挨踢路，链接: https://itlu.net/articles/1709.html

挨踢路

图片容错处理，利用Javascript的Onerror事件

相关文章

评论列表(2条)

添加评论