img的onerror事件

情景:

  1.当在页面中显示的图片不存在

  2.图片存在但由于网络问题导致无法正常显示图片

问题:当图片无法正常显示的时候会在图片的位置显示破碎的图标不美观也不友好

方法:可以借助于img标签的onerror事件做一些处理用默认的图片替换破碎的图标

<img src="xxx.png" onerror="javascript:this.src=‘static/images/default.png‘;">

理想情景:当xxx.png找不到时会触发onerror事件并且将src指向的图片,并正常显示

不理想:本地的图片也加载有问题,此时会不断的触发onerror事件,导致死循环,故此方式有风险不推荐

<script type="text/javascript">
     function errorEvent(dom){
        dom.src = "static/images/default.png";
        dom.onerror = null; //避免死循环
     }
</script> 

<img src="xxx.png" onerror="errorEvent(this)" />

如有不严谨和错误地方请希望指正,祝大家工作顺利 !

原文地址:https://www.cnblogs.com/yincece0316/p/10821861.html

时间: 2024-10-06 20:13:21

img的onerror事件的相关文章

onerror事件

onerror 事件会在文档或图像加载过程中发生错误时被触发. 在装载文档或图像的过程中如果发生了错误,就会调用该事件. 例: img标签中的src图片加载失败,原来的图片位置会出现一个加载失败的小图; onerror事件就在发生错误时被调用,从而用一张备用图片替代原图; <img src="images/pic.jpg"onerror="javascript:this.src='images/error.jpg;'"/> 如果error.jpg 也不存

img onerror事件

怪自己知道的太少,img标签有onerror这个事件,我是才刚知道,恕我愚昧,既然是第一次遇到,而且又是一个自己从没有涉及过得的东西,所以我希望通过这个随笔来是自己印象深刻,此文仅仅只是让自己印象深刻的水文,知道这个事件的诸位尽可以绕道而行了,如果你也没有涉及,或者你也不曾知晓这个事件的话,就随我一起来了解下这个属性吧..... 根据w3cschool: onerror事件会在文档或图片加载过程中发生错误时被触发,支持该事件的HTML标签有:img,object,style;实例如下: <!DO

【JavaScript】加载失败的红叉图片处理与&lt;img&gt;图片标签的onerror事件

大家上网的时候肯定见到过加载失败的红叉图片,具体如下图.当然现在Google Chrome与Firefox对其处理会好看一些. 其实可以利用<img>图片标签的onerror事件对其处理的,要求其加载失败之后,马上加载一张默认图片,而不是显示为红叉叉. 其代码如下: <img src="s.png" onerror="javascript:this.src='xx.png';this.width=80;this.height=80;" />

图片输出onerror事件

<img src=".<?php echo $img[0];?>" onerror="this.src='img/zanwu.jpg'" style="width:120px;height:90px;" /> 当图片变量不存在的情况下直接使用onerror事件输出默认图片

&lt;img/&gt;标签onerror事件在IE下的bug和解决方法

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

JavaScript onerror事件

1 onerror事件描述 使用onerror事件是一种老式的标准的在网页中捕获Javascript错误的方法 2 何时产生onerror事件 只要页面中出现脚本错误,就会产生onerror事件 3 如何使用onerror事件 利用onerror事件,就必须创建一个错误的函数.你可以把这函数叫作onerror事件处理器.这个事件处理器使用三个参数来调用:msg(错误消息), url(发生错误的页面的url), line(发生错误的代码行) 4 语法 onerror = handleErr fun

图片的onerror 事件解析

1. 该事件触发条件 文档和图像在加载失败的时候(用户体验会下降.)会触发该事件 2. 解决碎图的办法 利用img的onerror事件和javascript 例: 现有的图片是 successed.png <img src="successed.png"> 正常展示 <img src="successed1.png"> 此时找不到successed1.png 图片 页面展示如下 解决方案 <img src="successed

HTML Dom Event对象onerror事件

语法: onerror="SomeJavaScriptCode" onerror 事件会在文档或图像加载过程中发生错误时被触发. 支持该事件的 HTML 标签: <img>, <object>, <style> 支持该事件的 JavaScript 对象: window, image 例: 装载图像时发生了错误,弹出一个提示框: <img src="image.gif" onerror="alert('图片找不到,无

图片(img标签)的onerror事件

打开网页时提示 Stack overflow at line: 0. 经过分析,发现网页中存在类似如下的代码: <img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" /> 分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个 NoPic.gif 图片.也就是说图片存在则显示 pic