js 图片加载失败处理方法「建议收藏」

js 图片加载失败处理方法「建议收藏」个人github:https://github.com/qiilee 欢迎follow在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败;这样就会显示一个很难看的坏图片缩略图;下面介绍两种方法,解决这个问题:1、如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数;$("img").error(function(){  //当图…

大家好,又见面了,我是你们的朋友全栈君。

个人github:https://github.com/qiilee  欢迎follow

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

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

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

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

复制代码

HTML 中:
  <element onerror="myScript">尝试一下

JavaScript 中:
  object.onerror=function(){myScript};尝试一下

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

支持的 HTML 标签: <img>, <input type="image">, <object>, <script>, <style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/136993.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月2日 下午6:46
下一篇 2022年6月2日 下午7:00


相关推荐

  • J2EE是什么意思_main()函数是java程序的执行入口

    J2EE是什么意思_main()函数是java程序的执行入口j2ee   J2EE简介  J2EEJava2平台企业版(Java2Platform,EnterpriseEdition)   J2EE是一套全然不同于传统应用开发的技术架构,包含许多组件,主要可简化且规范应用系统的开发与部署,进而提高可移植性、安全与再用价值。   J2EE核心是一组技术规范与指南,其中所包含的各类组件、服务架构及技术层次,均有共通的标准及规格,让各种依

    2022年10月11日
    3
  • 基于FPGA的光口通信开发案例

    基于FPGA的光口通信开发案例前言自著名华人物理学家高锟先生提出 光传输理论 实用化的光纤传输产品始于 1976 年 经历了 PDH SDH DWDM ASON MSTP 的发展历程 本世纪初期 ASON OADM 技术

    2026年3月26日
    1
  • 程序员自学网站推荐

    程序员自学网站推荐1 CSDN CSDN 专业开发者社区 CSDN 是国内非常知名的技术交流社区 创建的时间也比较早 所以在国内也很有影响力 并且 CSDN 还是有非常多很优质的原创文章与资料 对于程序员来讲经常来这边逛逛也会学到不少知识的 2 ImportNew import JavaScript MDN mozilla org 对于 java 有一定基础的人来说不错 一些 java 的最新技术随时更新 其中很多文章都写的很好 并且有图片插图进行说明 3 全智网 全智网 中国最全的人工智能网址

    2026年3月18日
    1
  • ramdisk介绍与制作

    ramdisk介绍与制作转自 http m blog csdn net silent123go article details 一 文件系统与根文件系统 nbsp nbsp nbsp 1 文件系统 nbsp nbsp nbsp nbsp nbsp nbsp nbsp 文件系统是操作系统用于明确存储设备 常见的是磁盘 也有基于 NANDFlash 的固态硬盘 分区上的文件的存储方法和数据结构 即在存储设备上组织文件的方法 nbsp nbsp nbsp nbsp nbsp nbsp nbsp 看了这个概念如果有些懵 下面用

    2025年10月1日
    4
  • javaScript — touch事件详解(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新

    2022年4月9日
    49
  • idea激活插件(在线激活)

    idea激活插件(在线激活),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月14日
    732

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号