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

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

    <img src="pic.gif" onerror="javascript:this.src='/nopic.gif';" alt="itlobo_pic" />

    这样子写的意思是原本是显示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="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="https://www.google.com.hk/intl/zh-CN/images/logocn.png" width="150" height="60" onerror="nofind('google');" />
<hr />
<img src="https://www.google.com.hk/intl/zh-CN/images/logocn.png" width="150" height="60" onerror="nofind('baidu');" />

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

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

查看 google JavaScript onerror的相关文章

转载本站原创文章请注明:文章转自 灰狼IT路,链接: http://itlu.org/articles/1709.html

已有 2 条评论

  1. 最后那个函数很实用,解决了我大问题

    1. 其实只是根据原有的函数演变了一下而已

添加新评论