JavaScript通过使用onerror设置默认图像显示代替alt
JavaScript代码
//图像加载出错时的处理 function errorImg(img) { img.src = "默认图片.jpg"; img.onerror = null; }
html代码
<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />
为了美观当网页图片不存在时不显示叉叉图片
当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。
其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:
1、让这个图片元素隐藏:
为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>
2、用默认的图片替换:
为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>
注意:如果使用不当,在IE内核的浏览器下会造成死循环。比如:当【默认图片的url地址】也加载不成功(比如网速比较慢的时候)或不存在的话,就会反复的加载,最后造成堆栈溢出错误。
因此, 需要用下面两种方法解决:
a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小,并且存在。
b、控制onerror事件只触发一次,需要增加这句话:this.onerror=null; 增加后如下:
为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址;this.onerror=null'"/>
经测试,上面的方法在IE各个版本及谷歌、火狐浏览器中都支持。
相关推荐
-
JS使用onerror捕获异常示例
本文实例讲述了JS使用onerror捕获异常的方法.分享给大家供大家参考,具体如下: 如果需要利用 onerror 事件,就必须创建一个处理错误的函数.你可以把这个函数叫作 onerror 事件处理器 (onerror event handler).这个事件处理器使用三个参数来调用:msg(错误消息).url(发生错误的页面的 url).line(发生错误的代码行). <head> <script type="text/javascript"> onerror=
-
JS实现点击链接取消跳转效果的方法
复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <script type="text/javascript">
-
js实现点击链接后延迟3秒再跳转的方法
本文实例讲述了js实现点击链接后延迟3秒再跳转的方法.分享给大家供大家参考.具体分析如下: js实现点击链接后延迟3秒再跳转.不管有没有用,咱们反正能实现 使用setTimeout()函数实现跳转延迟 <html> <head> <title> jquery 延迟跳转</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"
-
javascript字典探测用户名工具
<html> <head> <style> body { font-size: 10pt; background-color:#D4D0C8 } td { font-size: 9pt } </style> </head> <script language="javascript"> /* 程序标题:javascript字典探测用户名工具 发布时间:2006年8月 文章作者:翟振
-
JavaScript探测CSS动画是否已经完成的方法
不啰嗦上代码: WN:(function(){ var el = $('<fakeelement>'), transition="transition", transitionEnd, animEvent={'start':null,'iteration':null,'end':null}, vendorPrefix; transition = transition.charAt(0).toUpperCase() + transition.substr(1); vendor
-
JS实现探测网站链接的方法【测试可用】
本文实例讲述了JS实现探测网站链接的方法.分享给大家供大家参考,具体如下: 如果想通过程序探测一个网站链接是否存在,可以通过服务器端高级语言编程实现,其实客户端的JavaScript也是可以探测的,下面通过一个技巧来探测网站链接. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q
-
JavaScript中的onerror事件概述及使用
1.Window.onerror事件 onerror事件用来协助处理页面中的JavaScript错误.当页面上出现异常时,error事件便在window对象上触发.例如: 在这种情况下,浏览器会显示错误信息: . 如果不希望浏览器在默认对话框中显示出错消息,让onerror方法返回true即可. 此外,onerror方法还提供了三个参数用来确定错误确切的信息,分别是: 1)message:一个字符串,声明了出现的错误的信息(不同的浏览器中返回的消息内容略有差异). 2)url:一个字符串,声明了
-
javascript window.onerror事件学习新收获
在捕获js错误时,我们通常使用try{}catch(e){}的方式,然后通过e.errorMessage等方式获取错误信息然后报告错误.但对于onerror事件可能很少问津,我们是否思考过如何报告错误所在的行号?如果想过这个是否也被这个问题所困扰过,是否认为在js里不可能捕获错误的行号呢?其实本人就遇到上述的几个问题,今日读某人写的一段js代码顿然发现了onerror事件,要说onerror这个时间也是n久以前就知道了,但对于其所带有的三个参数和其特殊性质却一直没有去了解过.经过自己的研究测试,
-
JS获得URL超链接的参数值实例代码
复制代码 代码如下: var url = location.href; //获取keyword的参数值 var es=/keyword=/; es.exec(url); var result=RegExp.rightContext; 例如: 复制代码 代码如下: var url = location.href; //获取pid的参数值 var es=/pid=/; es.exec(url); var pid=RegExp.rightContext; var aurl = "&pid=&q
-
用window.onerror捕获并上报Js错误的方法
前两天有个2048游戏的用户反馈说,打开游戏后不能玩儿,只有一个游戏面板,数字无法初始化,更无法移动,设备为iPhone 4S.iOS 5.1.尝试从微信调起Safari打开,依然不好使.由于游戏中运用了比较多的HTML5特性,所以粗略估计是有JS报错导致.不过这样的信息该如何捕获到呢?当然是传说中的window.onerror. 从W3C找到关于window.onerror的方法体介绍: 这个意思,基本可以就是说,window.onerror方法,我们可以写成: /** * @param {S
-
js注意img图片的onerror事件的分析
经过分析,发现网页中存在类似如下的代码: <img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" /> 分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个 NoPic.gif 图片.也就是说图片存在则显示 pic.gif,图片不存在将显示 noPic.gif.但问题来了,如果 no
-
JS对img标签进行优化使用onerror显示默认图像
对于网站图像的不显示有很多原因,网络问题,文件本身问题,文件URL问题等,而当图像加载失败时会触发onerror这个事件,我们利用这点,可以有效的避免图像加载失败的尴尬! js代码 复制代码 代码如下: //图像加载出错时的处理 function errorImg(img) { img.src = "http://static.xuexiba.com/uploadfile//UserInfo/Avatar/201403/1303992393385832875324.jpg"; img.
-
用javascript实现给图片加链接
<script> var strVariable = "<img src='http://www.jb51.net/images/logo.gif'>"; strVariable = strVariable.link("http://www.jb51.net"); document.write(strVariable) </script>
随机推荐
- 浅谈数据库事务四大特性
- 把jQuery的each(callback)方法移植到c#中
- 遍历DOM对象内的元素属性示例代码
- Python中列表和元组的相关语句和方法讲解
- 基于React.js实现原生js拖拽效果引发的思考
- Windows注册表应用技巧三则
- Windows下bat批处理脚本使用telnet批量检测远程端口小记
- IOS 指纹识别两种方式详解及实例
- 多版本Python共存的配置方法
- JS一个简单的注册页面实例
- PHP与C#分别格式化文件大小的代码
- python开发中module模块用法实例分析
- 通过一段代码简单说js中的this的使用
- MySQL动态修改varchar长度的方法
- mysql 详解隔离级别操作过程(cmd)
- MySQL一个索引最多有多少个列?真实的测试例子
- nodejs批量修改文件编码格式
- Ajax结合php实现二级联动
- Linux 管理员手册(2)
- Jquery 最近浏览过的商品的功能实现代码