使用场景

其实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事件的更多相关文章

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

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

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

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

  3. 基于window.onerror事件 建立前端错误日志

    QA不是万能的,用户的浏览环境非常复杂,很多情况无法靠测试用例去覆盖,所以最好建立一个前端错误日志,在真实用户端收集bug. try&catch是一个捕获前端错误的常见方法,比如: { //给 ...

  4. 图片输出onerror事件

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

  5. img onerror事件

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

  6. img标签的onerror事件

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

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

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

  8. [译]window.onerror事件

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

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

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

随机推荐

  1. openssl 使用非阻塞 bio

    序 在项目中需要访问 https 加密的网页,为了保证并发性,需要用到非阻塞的 socket,搜索发现,这种使用场景的相关介绍不是很多,所以这里记录一下使用的过程. 在项目中,所使用的 ssl 库是老 ...

  2. DOM4J 读取XML配置文件进行数据库连接

        介绍介绍DOM4J.    据说是非常优秀非常优秀的Java XML  API(Dom4j is an easy to use, open source library for working ...

  3. openstack nova数据库计算结点IP地址

    最近遇到一个问题就是在控制结点上查找nova数据库中 select * from compute_nodes\G;中出现IP地址一直是127.0.0.1不是计算结点的IP,就算修改成计算结点的IP,也 ...

  4. JavaScript 框架比较

    显著增强 JavaScript 开发的框架概览 Joe Lennon, 软件开发人员, 自由职业者 简介: 现代 Web 站点和 Web 应用程序倾向于依赖大量客户端 JavaScript 来提供丰富 ...

  5. TCP/IP-IP

    A contented mind is a perpetual feast. "知足长乐" 参考资料:TCP/IP入门经典 (第五版) TCP/IP详解 卷一:协议 一.简介 IP ...

  6. Kohana框架ORM类的基本使用

    1.首先需要创建一个模型类,以user为例,在application/classes/model/user.php路径下创建user.php,并且一个表对应一个模型,且表名必须在类名后加“S”,即表名 ...

  7. hdu 1241 Oil Deposits(DFS求连通块)

    HDU 1241  Oil Deposits L -DFS Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & ...

  8. Oracle 游标使用全解(转)

    转自:http://www.cnblogs.com/sc-xx/archive/2011/12/03/2275084.html 这个文档几乎包含了oracle游标使用的方方面面,全部通过了测试 -- ...

  9. 清橙A1484

    http://www.tsinsen.com/ViewGProblem.page?gpid=A1484### 题解: 在线插入并不好做,我们将所有操作离线,变为删除操作. 每次询问的时候对于当前B串所 ...

  10. UI基础 - UIScrollView

    scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(, , , )]; scrollView.backgroundColor = [ ...