图片的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="data:images/logoError.png";
img.onerror=null; //控制不要一直跳动
}
</script>
图片的onerror 事件解析的更多相关文章
- 图片输出onerror事件
<img src=".<?php echo $img[0];?>" onerror="this.src='img/zanwu.jpg'" st ...
- 解析img图片没找到onerror事件
本篇文章主要介绍了img图片没找到onerror事件 Stack overflow at line: 0 需要的朋友可以过来参考下,希望对大家有所帮助 打开网页时提示 Stack overflow a ...
- 加载默认图片,如何避免img标签陷入onerror事件死循环
当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...
- img的onerror事件(瑕疵+解决办法)【转】
显示图片的时候,为了更好的用户体验,可能会把一些没有图片的内容也用图片样式显示出来,此时我们就要用到IMG的onerror事件了,注意MyEclipse的快捷键alt+/是没有的. < img ...
- img的onerror事件
使用场景 其实on error使用上是比较简单的. 当我们网站上出现了无效图片,而我们希望用友好的方式告诉用户,而不是显示红叉叉. w3c上解释的 定义和用法: onerror 事件会在文档或图像加载 ...
- img onerror事件
怪自己知道的太少,img标签有onerror这个事件,我是才刚知道,恕我愚昧,既然是第一次遇到,而且又是一个自己从没有涉及过得的东西,所以我希望通过这个随笔来是自己印象深刻,此文仅仅只是让自己印象深刻 ...
- img标签的onerror事件
#情景分析: 有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,这样让人很不爽,如何变得美观些呢? #解决方案: 可以借用img标签的onerror事件,img标签支持oner ...
- <img/>标签onerror事件在IE下的bug和解决方法
IE下打开网页时,会弹出“Stack overflow at line: 0”的弹框.经分析,这个bug是由于img标签的onerror事件引起的.程序中用到的代码片段如下:正常情况下显示src所指路 ...
- 在img标签上尽量不要使用onerror事件
在img标签上尽量不要使用onerror事件 因为在之前的时候,我在本地对用户头像修改发现,如果图片加载失败, 使用onerror事件去获取一个默认地址的图片虽然这是可行的,但是如果刚好onerror ...
随机推荐
- 判断IE版本的HTML语句[if lte IE 9]……[endif]
我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...
- 介绍axios和promise
今天小编为大家带来 axios 和promise的详细讲解,包含 axios的使用方法 多种写法,封装 以及 promise的详细讲解,项目中如何运用等,会一一的为大家讲解清楚. 一.axios的介绍 ...
- JS高级---数组和伪数组
数组和伪数组 伪数组和数组的区别 真数组的长度是可变的 伪数组的长度不可变 function f1() { var sum = 0; for (var i = 0; i < arguments ...
- python 深浅copy总结
总结: ''' 总结:假设l1为原数据,l2为deepcopy后的数据: 1.浅copy,只能改变第一层的内存地址(不可变数据类型除外). 2.深copy,能够改变第一层和第二层的内存地址(不可变数据 ...
- 题解【洛谷P1886】滑动窗口 /【模板】单调队列
题面 单调队列模板题. 单调队列可以从队首和队尾出队. 队列中的元素大小具有一定的顺序. 具体可参考这一篇题解 #include <bits/stdc++.h> #define itn i ...
- CentOS7.0安装EMQ代理服务
CentOS7.0安装EMQ代理服务 安装文件下载 官网 : https://www.emqx.io/cn/ 下载地址: https://www.emqx.io/cn/downloads 选择需要的版 ...
- Redis 数据结构的底层实现 (二) dict skiplist intset
一.REDIS_INCODING_HT (dict字典,hashtable) dict是一个用于维护key和value映射关系的数据结构.redis的一个database中所有的key到value的映 ...
- 持续集成与自动化部署---代码流水线管理及Jenkins和gitlab集成
1.代码流水线管理 Pipeline名词顾名思义就是流水线的意思,因为公司可能会有很多项目.如果使用jenkins构建完成后,开发构建项目需要一项一项点击,比较麻烦.所以出现pipeline名词. 代 ...
- WPF学习笔记三之绑定
1.绑定模式 <TextBlock Margin="10" Text="LearningHard" Name="lbtext" Fon ...
- 《软件测试52讲》读书笔记 —— API测试怎么做
前言 文章中还介绍了测试工具,比如cURL.postman,单API如何测试:但这些都是偏基础的东西,且网上教程各式各样,就不再赘述了:这里主要讲的就是关于复杂场景的API测试要如何应对 API测试的 ...