JavaScript判断图片是否需要显示默认图片

显示一张图片,通过访问图片的地址,如果地址正确就显示地址正确的图片,如果不正确就显示默认的地址,说是通过JavaScript判断,实际只需要一个img标签就可以了

这里需要了解一下img标签中的onError ,onAbort,onALoad事件
onError:当图片加载出现错误,会触发 经常在这里事件里头写入 将图片导向默认报错图片,以免页面上出现红色的叉叉

onLoad:事件是当图片加载完成之后触发

onAbort:图片加载的时候,用户通过点击停止加载(浏览器上的红色叉叉)时出发,通常在这里触发一个提示:“图片正在加载”
例如:当一个图片显示失败之后需要连接另一个图片的时候可以这样写

<img src="http://avatar.csdn.net/1/2/F/3_clp880710.jpg"  style="width: 200px;height: 100px" 
onerror="javascript:this.src='http://www.baidu.com/img/bdlogo.gif'" />

把上面正确的地址改成错误的地址时就会加载百度的图片

例如,你可能会利用这个onAbort消息来警告用户,提醒他们停止某个重要图像的加载,例如图像映射:
<img src="pics/camnpr.gif" usemap="#map1" onAbort="window.alert('注意:这张照片含有重要的链接,请重新载入.')">

同时有另一个问题出现:如果onerror="this.src='图片'",这个"图片"也不存在时,就会出现下边的错误:
img图片没找到onerror事件 Stack overflow at line: 0

IE下打开网页时,会弹出“Stack overflow at line: 0”的弹框。经分析,这个bug是由于img标签的onerror事件引起的。程序中用到的代码片段如下:正常情况下显示src所指路径的图片,加载失败时显示通过img标签的onerror事件显示另一张图片,问题就出现在了这里,当另一张图片也不存在时,就造成了循环触发onerror事件,在IE下就会弹出“stack overflow”的弹框。

解决的方法也很简单,在重新给img的src属性赋值时,先将onerror事件清除掉,再赋值,这样就不存在循环调用的问题了,代码段如下:

<img src="http://avatar.csdnnet/1/2/F/3_clp880710.jpg"  style="width: 200px;height: 100px"
onerror="this.onerror='';this.src='http://www.baidu.com/img/bdlogo.gif'" />

当时竟然做成在后台判断图片是否存在,这样考虑的就要有防火墙的问题了,所以能在客户端解决的就在客户端解决。尽量不要依赖在服务端

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,694评论 1 92
  • < img> 标签是页面上最为重要的元素之一。很难想象一个页面上没有图片的样子,这样的页面效果将会大打折扣。 任何...
    壮哉我大前端阅读 10,900评论 1 9
  • JS通过onerror判断图片是否存在,如果不存在,则替换为指定的默认图片 情景分析:有时,img标签中的src图...
    他大舅啊阅读 9,130评论 0 1
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,710评论 1 41
  • 其实很多时候都很茫然,花很多时间去发呆。仔细思考一些根本不会发生的问题,所有的时间变得无法言明的有意义。 ...
    南道海无风阅读 1,576评论 2 0

友情链接更多精彩内容