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 ...
随机推荐
- The Cow Lexicon POJ - 3267 dp
题意 给出一个母串 和一个字典 问母串最少删去几个字母 删去后的母串是由字典里面的单词拼起来的 思路:dp[i]表示从i到母串结尾最少需要删除多少个字母 初始化dp[length]=0 ...
- Django+Xadmin打造在线教育系统(八)
首页和全局404,500配置 轮播图 公开课 授课机构 新建view ## 首页view class IndexView(View): def get(self,request): # 取出轮播图 a ...
- [SCOI2005] 互不侵犯
传送门:>Here< 解题思路 其实这道题一种很简单的解法是搜索+打表,但是这样很赖皮.这里给出一种状压DP的解法. 很显然利用普通的DP无法解决了,因为针对点来转移是很难的.但看到$N& ...
- wstngfw openVpn站点到站点连接示例(SSL/TLS)
wstngfw openVpn站点到站点连接示例(SSL/TLS) 在本例中,将假设以下设置: 站点 A 站点 B 名称 Beijing Office(北京办公室) 名称 Shenzheng Offi ...
- $NOIp2018$劝退记
鸽子博主好久没更博了,这一更可能以后都更不了了啊 \(Day~~1\) 考试爆零,已经无所畏惧了. 当作攒rp吧...qwq 晚上写了写数学总结,蒯了一堆人的博客资料,然后就学会了\(CRT\),\( ...
- 【BZOJ5197】Gambling Guide (最短路,期望)
[BZOJ5197]Gambling Guide (最短路,期望) 题面 BZOJ权限题 洛谷 题解 假设我们求出了每个点的期望,那么对于一个点,只有向期望更小的点移动的时候才会更新答案. 即转移是: ...
- 【APIO2018】新家(线段树)
[APIO2018]新家(线段树) 题面 UOJ 洛谷 BZOJ 题解 论比赛时想不到二分的危害,就只能Cu滚粗 既然不要在线,那么考虑离线做法. 既然时间是区间,那么显然按照时间顺序处理答案. 显然 ...
- LVS+Keepalived搭建高可用负载均衡
应用环境: LVS负责多台WEB端的负载均衡(LB):Keepalived负责LVS的高可用(HA),这里介绍主备模型. 测试环境: 配置步骤: 1. 安装软件 在LVS-1和LVS-2两台主机上安装 ...
- DHU--1247 Hat’s Words && HiHocder--1014 Trie树 (字典树模版题)
题目链接 DHU--1247 Hat’s Words HiHocder--1014 Trie树 两个一个递归方式一个非递归 HiHocoder #include<bits/stdc++.h> ...
- LOJ#2306 蔬菜
补充一个题意不太清楚的地方:蔬菜坏掉是假设蔬菜都有标号,那么特定标号的蔬菜就会在特定时间坏掉.如果你及时卖了它们,那么那一天就不会有新的蔬菜坏掉. 结论1:如果我们知道了k天的答案,那么我们直接扔掉若 ...