#情景分析:

  有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,这样让人很不爽,如何变得美观些呢?

#解决方案:

  可以借用img标签的onerror事件,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下: 

<img src="data:images/logo.png" onerror="javascript:this.src='images/logoError.png';">

  当图片images/logo.png不存在时,将触发 onerror事件,而 onerror 中又为该 img 指定了images/logoError.png图片。也就是说图片images/logo.png存在则显示logo.png,图片images/logo.png不存在将显示 logoError.png。

  *问题:如果images/logoError.png 也不存在,则会继续触发 onerror事件,导致死循环,故会出现打开网页时提示 Stack overflow at line: 0 错误。特别说明:如果图片存在,但网络很不通畅,也可能触发 onerror事件

  *解决方法:控制它不循环,代码如下:

 <script type="text/javascript">
function imgerrorfun(){
var img=event.srcElement;
img.src="data:images/logoError.png";
img.onerror=null; 控制不要一直跳动
}
</script> <img src="data:images/logo.png" onerror="imgerrorfun();" />

***————————————————————————————————————————***

img标签的onerror事件的更多相关文章

  1. 加载默认图片,如何避免img标签陷入onerror事件死循环

    当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...

  2. 图片(img标签)的onerror事件

    打开网页时提示 Stack overflow at line: 0.我做了截图如下: 经过分析,发现网页中存在类似如下的代码: <img src="pic.gif" oner ...

  3. <img/>标签onerror事件在IE下的bug和解决方法

    IE下打开网页时,会弹出“Stack overflow at line: 0”的弹框.经分析,这个bug是由于img标签的onerror事件引起的.程序中用到的代码片段如下:正常情况下显示src所指路 ...

  4. 在img标签上尽量不要使用onerror事件

    在img标签上尽量不要使用onerror事件 因为在之前的时候,我在本地对用户头像修改发现,如果图片加载失败, 使用onerror事件去获取一个默认地址的图片虽然这是可行的,但是如果刚好onerror ...

  5. img标签中的onerror事件

    img标签中有一个onerror事件.是当我引用的src属性获取不到图片或者网络错误导致无法正常显示我src属性的图片时,显示的提示错误图片或者是可以代替的万能图片. 用法: <img src= ...

  6. 基于window.onerror事件 建立前端错误日志

    QA不是万能的,用户的浏览环境非常复杂,很多情况无法靠测试用例去覆盖,所以最好建立一个前端错误日志,在真实用户端收集bug. try&catch是一个捕获前端错误的常见方法,比如: { //给 ...

  7. img onerror事件

    怪自己知道的太少,img标签有onerror这个事件,我是才刚知道,恕我愚昧,既然是第一次遇到,而且又是一个自己从没有涉及过得的东西,所以我希望通过这个随笔来是自己印象深刻,此文仅仅只是让自己印象深刻 ...

  8. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  9. img的onerror事件(瑕疵+解决办法)【转】

    显示图片的时候,为了更好的用户体验,可能会把一些没有图片的内容也用图片样式显示出来,此时我们就要用到IMG的onerror事件了,注意MyEclipse的快捷键alt+/是没有的. < img ...

随机推荐

  1. table-layui

    本文章为原创文章,转载请注明出处 html <div class="layui-btn-group tableBtn"> <button class=" ...

  2. 4、new一个对象的时候,初始化顺序:

    父类静态块>子类静态块> 父类属性(先系统默认值,后直接你赋予的值) >父类构造器>子类属性>子类构造器

  3. UNIX口令破解机

    在编写我们的UNIX口令破解机时,我们需要使用UNIX 计算口令hash 的crypt()算法.Python 标准库中已自带有crypt 库.要计算一个加密的UNIX 口令hash,只需调用函数cry ...

  4. python之旅5【第五篇】

    装饰器详解 函数刚开始不解析内部,只是放进内存 装饰器是函数,只不过该函数可以具有特殊的含义,装饰器用来装饰函数或类,使用装饰器可以在函数执行前和执行后添加相应操作. 1 下面以一个函数开始,理解下面 ...

  5. Mysql 计划任务

    -- 设置 show variables like '%sche%'; ; -- Start存储过程 drop PROCEDURE if exists test; CREATE PROCEDURE t ...

  6. Python内建GUI模块Tkinter(二)

    Python核心组件 1.Button 按钮组件:一个简单的按钮,用来执行一个命令或别的操作. 参数解析: text:指定按钮上显示的文本: anchor: 指定按钮上文本的位置(N, NE, E, ...

  7. Docker容器安装

    使用脚本安装 Docker 1.使用 sudo 或 root 权限登录 Centos. 2.确保 yum 包更新到最新. $ sudo yum update 3.执行 Docker 安装脚本. $ c ...

  8. 【XSY1162】鬼计之夜 最短路

    题目描述 给你一个\(n\)个点\(m\)条边的有向图,有\(k\)个关键点.求一条最短的从一个关键点到另一个关键点的路径. \(n,m,k\leq 100000\) 题解 跑\(k^2\)次最短路显 ...

  9. MT【295】线段比的仿射变换

    已知$F_1,F_2$分别为椭圆$\dfrac{x^2}{4}+\dfrac{y^2}{3}=1$的左右焦点.$A,B,C$是椭圆上$x$轴上方的三点,且$AF_1//BO//CF_2$,则$\dfr ...

  10. [luogu1452]Beauty Contest【凸包+旋转卡壳】

    题目大意 求出平面最远点对距离的平方. 分析 此题我wa了好久,第一是凸包写错了,后面又是旋转卡壳写错了..自闭3s. 题解应该是旋转卡壳,但是有人用随机化乱搞过掉了Orz. 讲讲正解. 我们先求出所 ...