img标签的onerror事件
#情景分析:
有时,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事件的更多相关文章
- 加载默认图片,如何避免img标签陷入onerror事件死循环
当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...
- 图片(img标签)的onerror事件
打开网页时提示 Stack overflow at line: 0.我做了截图如下: 经过分析,发现网页中存在类似如下的代码: <img src="pic.gif" oner ...
- <img/>标签onerror事件在IE下的bug和解决方法
IE下打开网页时,会弹出“Stack overflow at line: 0”的弹框.经分析,这个bug是由于img标签的onerror事件引起的.程序中用到的代码片段如下:正常情况下显示src所指路 ...
- 在img标签上尽量不要使用onerror事件
在img标签上尽量不要使用onerror事件 因为在之前的时候,我在本地对用户头像修改发现,如果图片加载失败, 使用onerror事件去获取一个默认地址的图片虽然这是可行的,但是如果刚好onerror ...
- img标签中的onerror事件
img标签中有一个onerror事件.是当我引用的src属性获取不到图片或者网络错误导致无法正常显示我src属性的图片时,显示的提示错误图片或者是可以代替的万能图片. 用法: <img src= ...
- 基于window.onerror事件 建立前端错误日志
QA不是万能的,用户的浏览环境非常复杂,很多情况无法靠测试用例去覆盖,所以最好建立一个前端错误日志,在真实用户端收集bug. try&catch是一个捕获前端错误的常见方法,比如: { //给 ...
- img onerror事件
怪自己知道的太少,img标签有onerror这个事件,我是才刚知道,恕我愚昧,既然是第一次遇到,而且又是一个自己从没有涉及过得的东西,所以我希望通过这个随笔来是自己印象深刻,此文仅仅只是让自己印象深刻 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- img的onerror事件(瑕疵+解决办法)【转】
显示图片的时候,为了更好的用户体验,可能会把一些没有图片的内容也用图片样式显示出来,此时我们就要用到IMG的onerror事件了,注意MyEclipse的快捷键alt+/是没有的. < img ...
随机推荐
- BZOJ5417[Noi2018]你的名字——后缀自动机+线段树合并
题目链接: [Noi2018]你的名字 题目大意:给出一个字符串$S$及$q$次询问,每次询问一个字符串$T$有多少本质不同的子串不是$S[l,r]$的子串($S[l,r]$表示$S$串的第$l$个字 ...
- P1308 统计单词数
P1308 题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请 ...
- BZOJ1835 [ZJOI2010] 基站选址 【动态规划】【线段树】
题目分析: 首先想一个DP方程,令f[m][n]表示当前在前n个村庄选了m个基站,且第m个基站放在n处的最小值,转移可以枚举上一个放基站的村庄,然后计算两个村庄之间的代价. 仔细思考两个基站之间村庄的 ...
- BZOJ1001 洛谷4001 [BJOI2006]狼抓兔子 题解
题目 这个题目有多种解法,这个题也是一个比较经典的题了,正是因为他的多样的做法,这个题主要难在建图和优化,因为这是一个网格图,所以spfa肯定过不去,所以用最短路解法的话,只能用dij,而网络流也是要 ...
- 如何判断是否为同一个App,Ionic3如何修改包名
如何判断是否同一个App 使用Ionic3创建了两个项目demo1.demo2,然后使用同一个JDK,生成了两个不同的keystore证书. 结果在手机端安装的时候,先安装demo1,没有任何替换的提 ...
- 给 Haproxy 创建日志文件
背景介绍:默认下的Haproxy配置是不会生成日志文件的,而无运行日志,无法确定系统运行是否流畅,无法提起预判可能发生的故障 创建Haproxy日志文件的步骤如下vi /etc/rsyslog.con ...
- 每天一个linux命令(02):route命令
route命令用来显示并设置Linux内核中的网络路由表,route命令设置的路由主要是静态路由.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现. 在L ...
- 【bfs】迷宫问题
[题目描述] 定义一个二维数组: int maze[5][5] = { 0,1,0,0,0, 0,1,0,1,0, 0,0,0,0,0, 0,1,1,1,0, 0,0,0,1,0, }; 它表示一个迷 ...
- POJ--1797 Heavy Transportation (最短路)
题目电波: POJ--1797 Heavy Transportation n点m条边, 求1到n最短边最大的路径的最短边长度 改进dijikstra,dist[i]数组保存源点到i点的最短边最大的路径 ...
- 省市区三级数据的MYSQL内容
省市区三级数据的MYSQL内容 省: /* Navicat MySQL Data Transfer Source Server : rm-2ze0lz594rof5nn72.mysql.rds.ali ...