图片的onerror 事件解析

1. 该事件触发条件

文档和图像在加载失败的时候(用户体验会下降。)会触发该事件

2. 解决碎图的办法 利用img的onerror事件和javascript

例:

现有的图片是

successed.png
<img src="successed.png"> 正常展示

<img src="successed1.png"> 此时找不到successed1.png 图片  页面展示如下

解决方案

<img src="successed1.png" onerror="javascript:this.src=‘logoError.png‘"> 正常展示

当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示successed1.png,图片不存在将显示 logoError.png。
即: 图片的src加载失败后,触发onerror 事件重写 src 正常展示重写后的图片  重写后的图片可以是一张默认提示错误的图片
但问题来了,如果logoError.png 也不存在,则继续触发 onerror,导致循环,碎图一直闪烁

解决方案

第一种:去掉 onerror 代码;或者更改 onerror 代码为其它;或者确保 onerror 中的图能成功加载第二种:阻止循环
<img src="successed1.png" onerror="noCurImg();"> <script>

  function noCurImg(){    var img=event.srcElement;     img.src="images/logoError.png";     img.onerror=null; //控制不要一直跳动  }
</script>
				
时间: 2024-11-06 23:29:33

图片的onerror 事件解析的相关文章

图片输出onerror事件

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

【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事件

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

&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

HTML Dom Event对象onerror事件

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

img的onerror事件

情景: 1.当在页面中显示的图片不存在 2.图片存在但由于网络问题导致无法正常显示图片 问题:当图片无法正常显示的时候会在图片的位置显示破碎的图标不美观也不友好 方法:可以借助于img标签的onerror事件做一些处理用默认的图片替换破碎的图标 <img src="xxx.png" onerror="javascript:this.src='static/images/default.png';"> 理想情景:当xxx.png找不到时会触发onerror

C#中图片单击旋转事件

#region 图片单击旋转事件        private void pb_Heads_Click(object sender, EventArgs e)        {            System.Drawing.Image myImage = pb_Heads.Image;            myImage.RotateFlip(RotateFlipType.Rotate90FlipXY);            pb_Heads.Image = myImage;     

25.Unity3D手机中Input类touch详解-Unity触屏事件解析到底(Twisted Fate)

首先贴一下Unity支持的模型文件类型,以前没有收集过. Unity支持两种类型的3D文件格式: 1.  通用的"出口型"3D文件 如.fbx..dae..3ds..dxf..obj等文件格式. 2.  3D软件专用的3D文件格式 如Max, Maya, Blender,Cinema4D, Modo, Lightwave & Cheetah3D 等软件所支持的格式,如.MAX, .MB, .MA等等. Unity3D手机中Input类touch详解: 1.Input.touch