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 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
在vue中使用防抖函数组件操作
Jul 26 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
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 数组的一个悲剧?
2011/05/11 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
php中数组最简单的使用方法
2020/12/27 PHP
Dom与浏览器兼容性说明
2010/10/25 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
python调用cmd复制文件代码分享
2013/12/27 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
详解python之简单主机批量管理工具
2017/01/27 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python使用递归的方式建立二叉树
2019/07/03 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python构造函数init实例方法解析
2020/01/19 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Python定义一个函数的方法
2020/06/15 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
幼儿园英语教学反思
2014/01/30 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
股东协议书范本
2014/04/14 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers