JavaScript通过使用onerror设置默认图像显示代替alt


Posted in Javascript onMarch 01, 2016

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各个版本及谷歌、火狐浏览器中都支持。

Javascript 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
validator验证控件使用代码
Nov 23 Javascript
jquery maxlength使用说明
Sep 09 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
js实现密码强度检验
Jan 15 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
jQuery增加与删除table列的方法
Mar 01 #Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 #Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 #Javascript
JavaScript Array对象详解
Mar 01 #Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 #Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 #Javascript
原生javascript实现解析XML文档与字符串
Mar 01 #Javascript
You might like
php文件上传的简单实例
2013/10/19 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP _construct()函数讲解
2019/02/03 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
原生JS轮播图插件
2017/02/09 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
js实现3D旋转相册
2020/08/02 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
Python实现简单截取中文字符串的方法
2015/06/15 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
采购员的工作职责
2013/12/26 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
十八届三中全会感言
2014/03/10 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
商务司机岗位职责
2015/04/10 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
Python 如何实现文件自动去重
2021/06/02 Python
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL