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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
用js遍历 table的脚本
Jul 23 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
VUE多层路由嵌套实现代码
2017/05/15 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
python 实现插入排序算法
2012/06/05 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
python将音频进行变速的操作方法
2020/04/08 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
模具毕业生推荐信
2014/02/15 职场文书
大学迎新标语
2014/06/26 职场文书
领导干部作风建设总结
2014/10/23 职场文书
工程部文员岗位职责
2015/02/04 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers