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 相关文章推荐
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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将向Java靠拢
2006/10/09 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
python使用matplotlib绘制柱状图教程
2017/02/08 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
python动态进度条的实现代码
2019/07/03 Python
Python 定义只读属性的实现方式
2020/03/05 Python
三星印度官网:Samsung印度
2019/08/03 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
小学五年级学生评语
2014/04/22 职场文书
运动会方阵口号
2014/06/07 职场文书
考试作弊检讨书
2014/10/21 职场文书
项目合作意向书
2015/05/08 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis