js针对图片加载失败的处理方法分析


Posted in Javascript onAugust 24, 2019

本文实例讲述了js针对图片加载失败的处理方法。分享给大家供大家参考,具体如下:

在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败;这样就会显示一个很难看的坏图片缩略图;下面介绍两种方法,解决这个问题:

1、如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数;

$("img").error(function(){
  //当图片加载失败时,你要进行的操作
  //$(this).attr('src','images/no_pic.jpg');
});

2、如果项目中没有jQuery这样的插件,可以使用HTML的DOM事件onerror事件处理;

HTML 中:

<element οnerrοr="myScript">

尝试一下

JavaScript 中:

object.οnerrοr=function(){myScript};

尝试一下

JavaScript 中, 使用 addEventListener() 方法:(注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。)

object.addEventListener("error", myScript);

支持的 HTML 标签: <img>, <input type="image">, <object>, <script>, <style>

另外,当图片加载错误的时候,触发onerror事件,还可使用一下方法进行处理:

①. 隐藏

<img src="" onerror="this.style.display = 'none' ">

②. 用默认的图片替换:

<img src="" onerror="this.src='banner_1.png';this.onerror='null' ">

PS:这里再为大家附上javascript系统自带事件参考表供大家参考查询:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

更多关于JavaScript相关内容可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
js prototype和__proto__的关系是什么
Aug 23 #Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 #Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 #Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 #Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 #Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 #Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 #Javascript
You might like
PHP语法速查表
2007/01/02 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
浅谈Python NLP入门教程
2017/12/25 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
python3实现猜数字游戏
2020/12/07 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
python如何调用字典的key
2020/05/25 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
学生自我鉴定模板
2013/12/30 职场文书
终止合同协议书
2014/04/17 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
五一放假通知怎么写
2015/08/18 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
创业计划书之网吧
2019/10/10 职场文书
python四种出行路线规划的实现
2021/06/23 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏