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 相关文章推荐
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
Angularjs中使用轮播图指令swiper
May 30 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
基于游标的分页接口实现代码示例
Nov 12 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
js获取div高度的代码
2008/08/09 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python利用tkinter实现屏保
2019/07/30 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
策划主管的工作职责
2013/11/24 职场文书
应征英语教师求职信
2013/11/27 职场文书
电子商务专业自荐信
2014/06/02 职场文书
公司委托书格式
2014/08/01 职场文书
《称赞》教学反思
2016/02/17 职场文书
《花钟》教学反思
2016/02/17 职场文书
用python自动生成日历
2021/04/24 Python