img的onerror事件
使用场景
其实on error使用上是比较简单的。
当我们网站上出现了无效图片,而我们希望用友好的方式告诉用户,而不是显示红叉叉。
w3c上解释的 定义和用法:
onerror 事件会在文档或图像加载过程中发生错误时被触发。
在装载文档或图像的过程中如果发生了错误,就会调用该事件句柄。
W3C上关于onerror的用法
<div>
demo1 : src 为正确地址 (结果是:src为正确时,显示正确图片,不会显示onerror中的默认图片)
<img src="../cat.jpg" onerror="javascript:this.src='../video占位图.jpg';" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>
<div>
demo2 : src 为错误地址(结果是:src为错误时,不会显示alt的错误信息,显示了onerror中的默认图片)
<img src="http://baidu.com" onerror="javascript:this.src='../video占位图.jpg';" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>
<div>
demo3 : src 为空 (结果是:src为空时,不会显示alt的错误信息,显示了onerror中的默认图片。因此,src为空也是判断了src加载地址的错误)
<img src="" onerror="javascript:this.src='../video占位图.jpg';" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>
<script>
function errorImg(img){
//alert("OK");
img.src = "../video占位图.jpg";
img.onerror = null;
}
</script>
<div>
demo4 : src 为错误地址or为空 (用函数的方式实现默认图片替换src加载失败的无效图片)
<img src="" onerror="errorImg(this)" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>
<div>
demo5 : 动态创建的img中的onerror (知识点:转义符)
</div>
<script>
function moveErrorImg(img){
console.log("OK");
img.src = "../video占位图.jpg";
img.onerror = null;
}
var htm = '<img src="" onerror='+moveErrorImg(this)+' alt="图片显示失败" style="width: 80px;height: 80px;">'
document.write(htm);
var htm1 = '<img src="" onerror=\'moveErrorImg(this)\' alt="图片显示失败" style="width: 80px;height: 80px;">'
document.write(htm1 +" ");
var htm2 = '<img src="" onerror=\"moveErrorImg(this)\" alt="图片显示失败" style="width: 80px;height: 80px;">'
document.write(htm2 +"<br/>");
var htm3 = '<img src="" onerror="javascript:this.src=\'../video占位图.jpg\';" alt="图片显示失败" style="width: 80px;height: 80px;">'
document.write(htm3);
var htm4 = '<img src="" onerror="javascript:this.src=\"../video占位图.jpg\";" alt="图片显示失败" style="width: 80px;height: 80px;">'
document.write(htm4 +" ");
var htm5 = "<img src='' onerror='javascript:this.src=\"../video占位图.jpg\";' alt='图片显示失败' style='width: 80px;height: 80px;'>"
document.write(htm5 +"<br/>");
</script>
效果如下:
img的onerror事件的更多相关文章
- 加载默认图片,如何避免img标签陷入onerror事件死循环
当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...
- img的onerror事件(瑕疵+解决办法)【转】
显示图片的时候,为了更好的用户体验,可能会把一些没有图片的内容也用图片样式显示出来,此时我们就要用到IMG的onerror事件了,注意MyEclipse的快捷键alt+/是没有的. < img ...
- 基于window.onerror事件 建立前端错误日志
QA不是万能的,用户的浏览环境非常复杂,很多情况无法靠测试用例去覆盖,所以最好建立一个前端错误日志,在真实用户端收集bug. try&catch是一个捕获前端错误的常见方法,比如: { //给 ...
- 图片输出onerror事件
<img src=".<?php echo $img[0];?>" onerror="this.src='img/zanwu.jpg'" st ...
- img onerror事件
怪自己知道的太少,img标签有onerror这个事件,我是才刚知道,恕我愚昧,既然是第一次遇到,而且又是一个自己从没有涉及过得的东西,所以我希望通过这个随笔来是自己印象深刻,此文仅仅只是让自己印象深刻 ...
- img标签的onerror事件
#情景分析: 有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,这样让人很不爽,如何变得美观些呢? #解决方案: 可以借用img标签的onerror事件,img标签支持oner ...
- 解析img图片没找到onerror事件
本篇文章主要介绍了img图片没找到onerror事件 Stack overflow at line: 0 需要的朋友可以过来参考下,希望对大家有所帮助 打开网页时提示 Stack overflow a ...
- [译]window.onerror事件
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- <img/>标签onerror事件在IE下的bug和解决方法
IE下打开网页时,会弹出“Stack overflow at line: 0”的弹框.经分析,这个bug是由于img标签的onerror事件引起的.程序中用到的代码片段如下:正常情况下显示src所指路 ...
随机推荐
- openssl 使用非阻塞 bio
序 在项目中需要访问 https 加密的网页,为了保证并发性,需要用到非阻塞的 socket,搜索发现,这种使用场景的相关介绍不是很多,所以这里记录一下使用的过程. 在项目中,所使用的 ssl 库是老 ...
- DOM4J 读取XML配置文件进行数据库连接
介绍介绍DOM4J. 据说是非常优秀非常优秀的Java XML API(Dom4j is an easy to use, open source library for working ...
- openstack nova数据库计算结点IP地址
最近遇到一个问题就是在控制结点上查找nova数据库中 select * from compute_nodes\G;中出现IP地址一直是127.0.0.1不是计算结点的IP,就算修改成计算结点的IP,也 ...
- JavaScript 框架比较
显著增强 JavaScript 开发的框架概览 Joe Lennon, 软件开发人员, 自由职业者 简介: 现代 Web 站点和 Web 应用程序倾向于依赖大量客户端 JavaScript 来提供丰富 ...
- TCP/IP-IP
A contented mind is a perpetual feast. "知足长乐" 参考资料:TCP/IP入门经典 (第五版) TCP/IP详解 卷一:协议 一.简介 IP ...
- Kohana框架ORM类的基本使用
1.首先需要创建一个模型类,以user为例,在application/classes/model/user.php路径下创建user.php,并且一个表对应一个模型,且表名必须在类名后加“S”,即表名 ...
- hdu 1241 Oil Deposits(DFS求连通块)
HDU 1241 Oil Deposits L -DFS Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d & ...
- Oracle 游标使用全解(转)
转自:http://www.cnblogs.com/sc-xx/archive/2011/12/03/2275084.html 这个文档几乎包含了oracle游标使用的方方面面,全部通过了测试 -- ...
- 清橙A1484
http://www.tsinsen.com/ViewGProblem.page?gpid=A1484### 题解: 在线插入并不好做,我们将所有操作离线,变为删除操作. 每次询问的时候对于当前B串所 ...
- UI基础 - UIScrollView
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(, , , )]; scrollView.backgroundColor = [ ...