1. 全栈程序员必看首页

HTML img图片加载失败时用默认图片替换

全栈程序员-站长 • • 未分类 • 阅读 36

HTML img图片加载失败时用默认图片替换原文地址：http://blog.csdn.net/qq_24771775/article/details/50294931 img元素加载图片失败，则变成一个小图标，让页面变得难看。此时如何替换为默认图片？onerror属性img元素自带onerror属性，加载失败时，触发error事件src=”http://yongqing.is-programmer.com/posts/i

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

原文地址：http://blog.csdn.net/qq_24771775/article/details/50294931

 img元素加载图片失败，则变成一个小图标，让页面变得难看。此时如何替换为默认图片？

onerror属性

img元素自带onerror属性，加载失败时，触发error事件 
<img src="http://yongqing.is-programmer.com/posts/image.gif" onerror='this.src="http://yongqing.is-programmer.com/posts/default.gif" />

jquery.error函数

jquery提供对应的事件处理函数 
$('img').error(function(){ 
    $(this).attr('src',"default.gif"); })

jquery.one函数

使用上面两种方法，假如默认图片也加载失败，则变成死循环. 此时可使用one()绑定事件 
$("img").one("error", function(e){ 
    $(this).attr("src", "default.gif"); });
 
另外error事件，不支持冒泡，jquery.delegate函数捕捉不到error事件。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • [CV] Structure from motion（SFM）- 附我的实现结果

    [CV] Structure from motion（SFM）- 附我的实现结果

    [CV] Structure from motion（SFM）- 附我的实现结果【更新】我的新博客：www.ryuzhihao.cc，当然这个csdn博客也会更新本文在新博客中的链接：点击打开链接完成时间：2017年2月27日博客时间：2017年4月26日去年，我有幸了解到image-basedmodeling的相关知识。作为一个大三本科生，虽说自己此前也做过一些相关工作，但是要自己实现Structuref…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月20日
    27
  • Visual Studio无法打开源文件的问题

    Visual Studio无法打开源文件的问题

    Visual Studio无法打开源文件的问题如果你项目配置好了，添加了头文件和库文件，编译还是无法查找源文件，那有可能是你解决方案配置里选到了Debug，切换为release才能成功。

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月18日
    377
  • 【Verilog】移位寄存器总结:移位寄存器、算数移位寄存器、线性反馈移位寄存器(LFSR)

    【Verilog】移位寄存器总结:移位寄存器、算数移位寄存器、线性反馈移位寄存器(LFSR)

    【Verilog】移位寄存器总结:移位寄存器、算数移位寄存器、线性反馈移位寄存器(LFSR)在练习HDLbits的时候，最常见的几种移位寄存器进行了总结，供大家参考，希望可以帮助到大家。

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月16日
    52
  • break 和 continue 的区别_continue的用法

    break 和 continue 的区别_continue的用法

    break 和 continue 的区别_continue的用法break和continue区别和用法的视频教程：https://ke.qq.com/course/149432?tuin=57912c43有技术问题或者面试方面想学习交流的加我个人微信renlliang2013，本人建了一个微信答疑群，有学习疑问的同学加我拉你进群。想搞清楚break和continue的用法以及区别必须要记住的两件两句话！我们大家先记住一句话：break再循环…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月13日
    0
  • 计算机端口大全_计算机网络常见的端口号

    计算机端口大全_计算机网络常见的端口号

    计算机端口大全_计算机网络常见的端口号计算机端口大全0端口：无效端口,通常用于分析操作系统1端口：传输控制协议端口服务多路开关选择器2端口：管理实用程序3端口：压缩进程5端口：远程作业登录7端口：回显9端口：丢弃11端口：在线用户13端口：时间17端口：每日引用18端口：消息发送协议19端口：字符发生器20端口：FTP文件传输协议(默认数据口)21端口：FTP文件传输协议(控制)22端口：SSH远程登录协议23端口：telnet(终端仿真协议),木马TinyTelnetServer开放此端口24端口：预留

    全栈程序员-站长的头像 全栈程序员-站长
    2025年9月4日
    18
  • SpringBoot项目报错解决：“Error starting ApplicationContext. To display the conditions report re-run …”

    SpringBoot项目报错解决：“Error starting ApplicationContext. To display the conditions report re-run …”

    SpringBoot项目报错解决：“Error starting ApplicationContext. To display the conditions report re-run …”SpringBoot项目报错：ErrorstartingApplicationContext.Todisplaytheconditionsreportre-runyourapplicationwith’debug’enabled.以下方案80%可以帮助您解决这些个‘可恶的’问题报错内容和截图如下：ConnectedtothetargetVM,address:’127.0.0.1:4963′,transport:’socket’.____

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月18日
    17

发表回复

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

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