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="data:images/logoError.png"; 
    img.onerror=null; //控制不要一直跳动
  }
</script>
												

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

  1. 图片输出onerror事件

    <img src=".<?php echo $img[0];?>" onerror="this.src='img/zanwu.jpg'" st ...

  2. 解析img图片没找到onerror事件

    本篇文章主要介绍了img图片没找到onerror事件 Stack overflow at line: 0 需要的朋友可以过来参考下,希望对大家有所帮助 打开网页时提示 Stack overflow a ...

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

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

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

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

  5. img的onerror事件

    使用场景 其实on error使用上是比较简单的. 当我们网站上出现了无效图片,而我们希望用友好的方式告诉用户,而不是显示红叉叉. w3c上解释的 定义和用法: onerror 事件会在文档或图像加载 ...

  6. img onerror事件

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

  7. img标签的onerror事件

    #情景分析: 有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,这样让人很不爽,如何变得美观些呢? #解决方案: 可以借用img标签的onerror事件,img标签支持oner ...

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

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

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

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

随机推荐

  1. 判断IE版本的HTML语句[if lte IE 9]……[endif]

    我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...

  2. 介绍axios和promise

    今天小编为大家带来 axios 和promise的详细讲解,包含 axios的使用方法 多种写法,封装 以及 promise的详细讲解,项目中如何运用等,会一一的为大家讲解清楚. 一.axios的介绍 ...

  3. JS高级---数组和伪数组

    数组和伪数组  伪数组和数组的区别 真数组的长度是可变的 伪数组的长度不可变 function f1() { var sum = 0; for (var i = 0; i < arguments ...

  4. python 深浅copy总结

    总结: ''' 总结:假设l1为原数据,l2为deepcopy后的数据: 1.浅copy,只能改变第一层的内存地址(不可变数据类型除外). 2.深copy,能够改变第一层和第二层的内存地址(不可变数据 ...

  5. 题解【洛谷P1886】滑动窗口 /【模板】单调队列

    题面 单调队列模板题. 单调队列可以从队首和队尾出队. 队列中的元素大小具有一定的顺序. 具体可参考这一篇题解 #include <bits/stdc++.h> #define itn i ...

  6. CentOS7.0安装EMQ代理服务

    CentOS7.0安装EMQ代理服务 安装文件下载 官网 : https://www.emqx.io/cn/ 下载地址: https://www.emqx.io/cn/downloads 选择需要的版 ...

  7. Redis 数据结构的底层实现 (二) dict skiplist intset

    一.REDIS_INCODING_HT (dict字典,hashtable) dict是一个用于维护key和value映射关系的数据结构.redis的一个database中所有的key到value的映 ...

  8. 持续集成与自动化部署---代码流水线管理及Jenkins和gitlab集成

    1.代码流水线管理 Pipeline名词顾名思义就是流水线的意思,因为公司可能会有很多项目.如果使用jenkins构建完成后,开发构建项目需要一项一项点击,比较麻烦.所以出现pipeline名词. 代 ...

  9. WPF学习笔记三之绑定

    1.绑定模式 <TextBlock Margin="10" Text="LearningHard" Name="lbtext" Fon ...

  10. 《软件测试52讲》读书笔记 —— API测试怎么做

    前言 文章中还介绍了测试工具,比如cURL.postman,单API如何测试:但这些都是偏基础的东西,且网上教程各式各样,就不再赘述了:这里主要讲的就是关于复杂场景的API测试要如何应对 API测试的 ...