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

全栈程序员-站长 • 2022年6月1日下午11:00 • 未分类 • 阅读 38

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

作为一个程序员，什么是脚本。必须要理解「建议收藏」

作为一个程序员，什么是脚本。必须要理解「建议收藏」Javascript是一门动态类型、面向对象的脚本语言。对脚本进行一个感性的认识。就是一个跟计算机执行的文本。理解脚本如果你打开一本JavaScript教程，那么很可能在第一章就看到这句话

全栈程序员-站长
2022年8月2日
6
查看文件内容linux命令_shell读取文件内容

查看文件内容linux命令_shell读取文件内容查看文件内容总览cat由第一行开始显示文件内容tac从最后一行开始显示，可以看出tac是cat的倒着写！nl显示的时候，顺道输出行号！more一页一页的显示文件内容less

全栈程序员-站长
2022年7月30日
9
Tomcat命令

Tomcat命令

全栈程序员-站长
2022年4月3日
77
JAVA葵花宝典（基础版）

JAVA葵花宝典（基础版）JAVA葵花宝典（基础版）20201209response.getWriter().write()和response.getWriter().print()的区别newObjectMapper().writeValueAsString();JSON.stringify()常量命名【idea技巧】IDEA给方法添加注释模板newJdbcTemplate(JDBCUtil.getDataSource()).queryForObject()20201212【idea快捷键】显示方法参数ctrl+p获取验证

全栈程序员-站长
2022年7月7日
38
芯片的架构_意法半导体

芯片的架构_意法半导体在了解这些架构之前，我们应该先了解一下复杂指令集（CISC）和精简指令集（RISC）。怎么说这两个的区别呢？CISC的设计思路更加注重性能的发展，是一种高性能高功耗的芯片，在高密度的计算上更具有优势；RISC的设计思路更注重低功耗小尺寸，多用于移动端设备，在重复性任务上占优。举一个简单的例子来说明这个情况，我们在B站上常说的一键三连，CISC会把“点赞”“投币”“收藏”整理成一条指令在缓存中，再由处理器处理；但是对于RISC来说就是三条指令了先“点赞”再“投币”最后“收藏”，这样做的缺点就是很依赖内存带宽了

全栈程序员-站长
2025年9月29日
3
小程序点击复制功能_怎么复制小程序链接

小程序点击复制功能_怎么复制小程序链接先来说明一下我们需要实现的最终效果：用户点击之后复制页面内容。参考详情一、长按复制：长按复制，在微信小程序内的文字无法长按复制，除了text节点以外，但是要在text标签内加一个“selectable”属性。话不多说，我们直接上代码1.WXML<textselectable=”true”>长按复制<text/>二、一键复制：添加点击事件，绑定…

全栈程序员-站长
2022年9月29日
3

发表回复

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