判断img图片是否加载成功

最新推荐文章于 2023-04-09 22:18:45 发布
最新推荐文章于 2023-04-09 22:18:45 发布
阅读量2.3k 收藏 2
点赞数
文章标签： javascript 人工智能 前端 ViewUI
原文链接：http://www.cnblogs.com/chenwenhao/p/9511866.html
版权

　　上班之余，记录一下工作中遇到的有趣问题...

　　事情是这样的...在做一个内嵌H5的app时，有一个“个人名片”页面...要求：如果后台接口有给头像的图片链接就用他们给的，如果没给，前端给个默认头像...测试过程中发现，接口的图片链接有可能是无效的，就像这样一个链接http://www.test.com/wuxiao.png...我们当时的做法是判断avaterUrl（头像链接字段）是否存在，存在的情况下并不知道这张图片是否有效...如果是无效图片链接显示出来的是，很明显这样很糟糕...

　　ios开发人员说：我们可以知道这张图片是否加载失败，失败的话我们就替换成其他图片...

　　当时我就想：前端能不能判断图片是否加载成功呢？于是就开始去了解img的加载...（博文只给我目前掌握的最推荐的做法，一些不靠谱的不讨论...）

 

最低0.47元/天 解锁文章
anjiaoga2685
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js判断背景图片是否加载成功使用img的width实现
12-10
通常我们会添加`onload`和`onerror`事件监听器，以便在图片加载成功或失败时执行相应操作。在给定的描述中，仅检查`width`属性是一种简化版的实现，但可能会漏掉图片加载过程中的异常情况。 4. **局限性和问题**：...
jQuery 判断图片是否加载完成方法汇总
12-08
今天来看下如何判断所有的图片加载完成，而在加载完成之前可以使用 loading 的 gif 图表示正在加载中。 一、普通方法 监听 img 的 load 方法，每 load 一张图片比较一次。关键代码如下： var num = $img.length; $...
判断img是否加载完成
jiang07061236的博客
10-22 2636
img.onload事件和img.complete属性的简介和应用img.onload是当一张图片被加载完成后所触发的事件 实现图片显示功能； js部分：img.src="图片"; img.onload=showImg； function showImg() { 代码部分。。。。 } 对于 complete 属性来讲，IE是根据图片是否显示过来判断，就...
iOS -根据网络状态加载图片
dibu3564的博客
12-14 121
#import <UIImageView+WebCache.h> #import "SDWebImage.h" #import <AFNetworking.h> /** 小图 */ @property (nonatomic, copy) NSString *image0; /** 中图 */ @property (nonatomic, copy...
如何判断图片（img）是否已经加载成功--基于react
聆听。。花开雨落的博客
06-12 1807
我过去经常会问： 　有没有一种方法去判断子类组件是否已经渲染完成？ 答案当然是有的啦 componentDidMount()，在react component 已经渲染完成时就会调用componentDidMount()方法 如果你对componentDidMount() 不太熟悉， 那么建议你去看看react组件的生命周期（React Component Lifecycle Methods），哪里每一个方法你早晚都会用到的。 稍微多了解一些，你会意识到提问者真的想要知道的是图片何时才...
[前端] 判断图片是否加载完成
qq_39559879的博客
01-12 1178
图片会被浏览器缓存，单纯用 onload 事件监听器会监听到已经被缓存的图片的加载事件，这可能并不是我们需要的。解决方法：使用 complete + onload <div id="container"> <img src="..." /> <img src="..." /> <img src="..." /> <img src="..." /> </div> <script> $(
img 判断图片加载完成
kakarot_java的博客
12-16 1386
//判断浏览器 var Browser=new Object(); Browser.userAgent=window.navigator.userAgent.toLowerCase(); Browser.ie=/msie/.test(Browser.userAgent); Browser.Moz=/gecko/.test(Browser.userAgent); //判断是否加载完成 ...
JS实现判断图片是否加载完成的方法分析
10-18
这篇文章将介绍几种常见的JS实现判断图片是否加载完成的方法，这些方法有助于优化用户体验，特别是对于那些依赖大量图片的网页。 1. **onload事件** `onload`事件是在元素（如`<img>`）的资源加载完成后触发的。...
JavaScript判断图片是否能够加载,失败则替换默认图片
10-28
console.log('图片加载成功'); }; ``` 在这个例子中，如果图片`invalid-image-url.jpg`无法加载，JavaScript会触发`onerror`事件，将图片的`src`属性更改为`default-image-url.jpg`。同时，为了避免图片因...
JS中如何检测img图片加载完成？
且行且看
11-09 8703
JS中如何检测img图片加载完成？ 在图片比较多的网页， 图片加载会需要一定的时间， 那有些效果可能需要在图片加载完成的时候做。 那么， 在js中如何判断img图片加载完成呢？ 想到加载动作， 自然想到img标签的onload事件， 在图片加载完成的时候，会触发img标签的onload事件， 我们可以在onload事件的回调函数里处理需要在图片加载完成之后的动作。
js判断图片有没有加载完成
笑到世界都狼狈的博客
04-27 2170
项目中遇到一个需要等二维码加载出来之后，在执行一些请求的需求，在网上看到一些方法都是什么if(img.comlpete){}或者img.onload之类的方法， 但是我试了都没啥用，于是想到应该是页面一进去，图片(请求的服务器图片)还没有返回，就已经将if(img.comlpete){}执行完成，所以根本就进不去。 最后加了一个定时器，解决了这个问题， 代码如下： var $pathWx = 'https://pics4.baidu.com/feed/03087bf40ad162d93da6bac
判断（img标签）中src的路径中照片文件是否存在
热门推荐
liayn523的博客
09-19 2万+
判断（img标签）中src的路径中照片文件是否存在
Vue中判断图片是否加载成功和失败
ct5211314的博客
11-08 8212
在vue项目开发过程中，可能需要进行一些图片的处理，用来根据图片的状态进行对应的处理。
图片加载成功、失败出发的方法、获取图片宽、高
04-09 242
【代码】图片加载成功、失败出发的方法、获取图片宽、高。
判断Image里面有无图像的语句
CrazyCock的专栏
10-17 1847
要通过判断Image1.Picture.Graphic是否为nil来完成，而不是判断Image1.Picture是否为空。
img的图片是否可以正常显示事件
qq_41248529的博客
09-30 1021
用TypeScript判断图片是否存在，不存在则显示默认图片的代码。 img标签有个onerror事件，写的时候加上就可以了，onerror事件里写上默认图片的路径 代码： js: &amp;amp;amp;lt;img src=&amp;amp;quot;{{userInfo.headPortrait}}&amp;amp;quot; onerror=&amp;amp;quot;javascript:this.src='assets/images/headportrait.p
js判断图片是否存在的几种方法
HQqHQhqqhq的博客
11-20 3172
js根据图片路径地址判断图片是否存在的几种方法 function CheckImgExists(imgurl) { var ImgObj = new Image(); //判断图片是否存在 ImgObj.src = imgurl; //没有图片，则返回-1 if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) { return true;...
如何判断图片加载完成
weixin_44761091的博客
03-16 2639
项目场景： 项目场景：在实现人机对话界面的过程中，有一个功能点 — 内容超过指定高度添加‘展开-收起功能’。 问题描述 临时添加‘‘展开-收起’’功能。所以简单的通过话术内容所在的div的高度判断是否展示‘展开-收起’按钮。 由于机器人的话术配置支持富文，也就不可避免的支持图片上传（重写了富文本的图片上传功能，图片存储的是对应fileService的地址具体实现可以参考这篇文章），在对话时渲染机器人话术通过Vue的v-html渲染富文本内容。 那么问题来了，判断div高度的时候，如果可视区域内存在图片，就会
html判断是否含有图片,html img src 判断图片路径是否有效
最新发布
06-01
要判断一个 HTML 文档中是否含有图片，可以使用 JavaScript 中的 DOM 操作来实现。具体方法如下： 1. 首先获取 HTML 文档中所有的图片元素，可以使用 document.getElementsByTagName("img") 方法来获取所有的 img 元素。 2. 然后遍历这些图片元素，判断每个元素是否有 src 属性，如果有则说明这个元素是一个图片元素。 3. 如果要判断图片路径是否有效，可以使用 JavaScript 中的 Image 对象来加载图片，如果加载成功则说明图片路径有效，否则说明无效。 示例代码如下： ```javascript // 判断 HTML 文档中是否含有图片 var images = document.getElementsByTagName("img"); if (images.length > 0) { console.log("该文档中含有图片"); } // 判断图片路径是否有效 var img = new Image(); img.src = "图片路径"; img.onload = function() { console.log("图片路径有效"); }; img.onerror = function() { console.log("图片路径无效"); }; ``` 需要注意的是，如果要判断图片路径是否有效，需要等待图片加载完成后再进行判断，因此需要在 Image 对象的 onload 或 onerror 事件中进行判断。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值