图片容错处理,利用Javascript的Onerror事件
很多时候,为了让网页图片可以显示,即使出现图片不存在的时候,也可以显示一个默认的图片。就会在img的HTML上设置一个onerror的事件,其实代码是很简单的。可以简单的写一个例子:
<img src='/index/thumb.png' data-original="pic.gif" onerror="javascript:this.src='/index/thumb.png' data-original='/nopic.gif';" alt="itlobo_pic" />
这样子写的意思是原本是显示pic.gif,如果pic.gif显示不了,就显示nopic.gif。但是这样子也会有其他问题,如果 nopic.gif也不存在,则继续触发onerror,导致循环,故出现错误。
另外,如果图片存在,但网络很不通畅,也可能触发onerror。
所以是不建议使用这个方法来处理的,如果只是这样子写,还不如直接去掉;或者更改onerror代码为其它;或者确保 onerror 中的图片足够小,并且存在。
不过既然这个方法不行,我们还可以尝试其他方法的,方法总是人想出来的。
代码如下:
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();" />
但是如果一个页面要写多个不同的判断,还不如用参数算了,免得要写很多东西。可以演变成以下代码:
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实例演示】
转载本站原创文章请注明:文章转自 挨踢路,链接: https://itlu.net/articles/1709.html
最后那个函数很实用,解决了我大问题
其实只是根据原有的函数演变了一下而已