JS通过onerror判断图片是否存在

使用JS判断并替换不存在图片的实现
最新推荐文章于 2024-04-23 12:49:36 发布
原创 最新推荐文章于 2024-04-23 12:49:36 发布 · 4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文介绍如何利用JavaScript的onerror属性，当图片不存在时自动替换为指定的默认图片，确保网页加载时的视觉体验不受影响。

JS通过onerror判断图片是否存在，如果不存在，则替换为指定的默认图片：

<img src="/imgages/headimg/10000011.jpg" onerror="javascript:this.src='/images/default.jpg'"/>

如果图片/imgages/10000011.jpg不存在，则显示/images/default.jpg。
JavaScript技巧：使用onerror设置默认图像代替alt
laugh666的博客
09-22 239
本文将介绍一种使用JavaScript的技巧，通过使用onerror事件和默认图像，实现在图像加载失败时显示默认图像的效果。首先，我们需要准备两个图像资源：一个是我们期望显示的默认图像，另一个是原始图像。在事件处理程序中，我们将替换图像元素的src属性为默认图像的URL，从而实现在图像加载失败时显示默认图像的效果。无论是在处理用户上传的图像，还是在加载外部图像资源时，这个技巧都可以帮助你处理图像加载失败的情况。属性设置为默认图像的URL，从而实现了在图像加载失败时显示默认图像的效果。请确保将示例代码中的。
js注意img图片的onerror事件的分析
10-28
打开网页时提示 Stack overflow at line: 0。img图片的onerror事件需要注意的细节。
JavaScript-onerror事件:图片加载失败后不显示
weixin_30752377的博客
06-02 388
HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" id="img1" onerror="hideImg1();"> <!--下面这个图加载失败但不会出现加载失败的样式--> <img src="http://www.mazey.net/i...
php实现image onerror,图片(img标签)的onerror事件
weixin_33955307的博客
03-21 556
分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif，图片不存在将显示 noPic.gif。但问题来了，如果 noPic.gif 也不存在，则继续触发 onerror，导致循环，故出现错误。说明：如果图片存在，但网络很不通畅，也可能触发 onerror。解决方法：第一种...
图片(img标签)的onerror事件
xihii6的专栏
06-25 3430
搜索设置|百度首页|登录注册 新闻　网页　贴吧　知道　音乐　图片　视频　地图　文库　更多» 输入法 手写拼音关闭 推荐 : 用手机随时随地上百度 <!-- .ec_bdtg .fsblock {padding:0; word-break:normal; font-family:arial; font-s
用Javascript判断图片是否存在，不存在则显示默认图片的代码
10-30
可以通过`onerror`事件来判断图片是否存在。具体做法是将图片的`src`属性设置为需要检测的图片地址，然后通过`onerror`事件来处理图片加载失败的情况。如果图片加载失败，`onerror`事件会被触发，然后我们可以将图片...
JS实现判断图片是否加载完成的方法分析
10-18
这篇文章将介绍几种常见的JS实现判断图片是否加载完成的方法，这些方法有助于优化用户体验，特别是对于那些依赖大量图片的网页。 1. **onload事件** `onload`事件是在元素（如`<img>`）的资源加载完成后触发的。...
javascript判断图片是否加载完成的方法推荐
10-22
本篇知识分享将向你介绍如何使用JavaScript来判断图片是否加载完成，以及相关的几种方法及其优缺点。 首先，最直接的方式是利用img标签自带的onload事件。onload事件会在图片完全加载完成后触发，我们可以在这个...
如何基于JavaScript判断图片是否加载完成
10-15
在JavaScript中，正确判断图片是否加载完成是网页动态加载和展示图片时不可或缺的技能。这个问题在Web开发中经常遇到，特别是在处理用户上传的图片或远程图片资源时。本篇文章将详细探讨如何通过JavaScript来实现这...
JavaScript判断图片是否能够加载,失败则替换默认图片
10-28
这时，为了提供良好的用户体验，我们可以编写代码来判断图片是否能成功加载，并在加载失败时用默认图片进行替换。这种功能可以避免页面出现空白或者不美观的占位符，提升网站的专业性和可靠性。 首先，我们需要创建...
JS对img标签进行优化使用onerror显示默认图像
10-26
主要介绍了JS对img标签进行优化使用onerror显示默认图像,需要的朋友可以参考下
js判断图片真实性（非判断文件后缀）
09-10
注！并不是通过常规判断文件后缀实现过滤。 非常简单实用的假图片过滤机制，可识别过滤其它文件篡改为图片格式的文件。
js onerror事件
Joy_Yue的博客
12-13 1454
官方文档上对这个事件的解释是： onerror 事件会在文档或图像加载过程中发生错误时被触发。 在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。 那么它是用在什么地方，怎么用的？ 举个栗子：在开发中，有通过接口传来的图片，但该图片不一定能读出来（也就是报404错误）。 这时如果不做处理，在Chrome下图片会不显示，在ie下会出现一个图片缺省的样子（很丑...）。 测试小姐...
JS中error错误信息图片损坏时如何让它显示一张别的图片
最新发布
ggq53219的博客
04-23 785
可以使用onerror事件处理器
js判断图片是否存在
Crazy_GirlLL的博客
08-05 2783
js判断图片是否存在
img标签的onerror事件（应用以及注意事项）
热门推荐
我的博客
08-14 6万+
情景分析：有时，img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，用户体验会下降。 博主现在抛砖引玉，说说自己的解决方案。 通过百度，可以给img标签加背景图片，代码如下： .headLogo img{     display: block;     width: 270px;     height: 60px;     background: url(
js--判断图片资源是否存在
05-18
在 JavaScript 中，可以使用 `Image` 对象来判断图片资源是否存在。具体做法如下： 1. 创建一个 `Image` 对象。 ``` const img = new Image(); ``` 2. 给 `Image` 对象设置 `src` 属性，并监听 `load` 和 `error`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值