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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
详解react-redux插件入门
Apr 19 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
微信小程序获取当前时间及星期几的实例代码
Sep 20 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
xml+php动态载入与分页
2006/10/09 PHP
PHP 万年历实现代码
2012/10/18 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python遍历类中所有成员的方法
2015/03/18 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
python英语单词测试小程序代码实例
2019/09/09 Python
Python中常用的os操作汇总
2020/11/05 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
中海讯通笔试题
2015/09/15 面试题
教师应聘个人求职信
2013/12/10 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
办公设备采购方案
2014/03/16 职场文书
药品营销策划方案
2014/06/15 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
科学育儿宣传标语
2014/10/08 职场文书
导游词之南京中山陵
2019/11/27 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python