项目场景：

项目场景：在实现人机对话界面的过程中，有一个功能点 — 内容超过指定高度添加‘展开-收起功能’。

问题描述

临时添加‘‘展开-收起’’功能。所以简单的通过话术内容所在的div的高度判断是否展示‘展开-收起’按钮。
由于机器人的话术配置支持富文，也就不可避免的支持图片上传（重写了富文本的图片上传功能，图片存储的是对应fileService的地址具体实现可以参考这篇文章），在对话时渲染机器人话术通过Vue的v-html渲染富文本内容。
那么问题来了，判断div高度的时候，如果可视区域内存在图片，就会造成判断错误。那么在图片加载完成之后再去判断div的高度不就可以解决问题了。那如何判断图片加载完了呢？

解决方案：判断图片加载完成

封装了一个方法，来判断图片是否加载完成，直接上代码：


// 图片是否已加载完毕
// pics：接收一个数组，内容为图片地址function imgReady(pics: Array<string>) {const picsAll = pics.map((imgurl) => {return new Promise((resolve, reject) => {const img = new Image();// 提取图片地址img.src = imgurl.replace("src=", "").replace("amp;", "").replace(/^['|"](.*)['|"]$/, "$1");img.onload = () => resolve(imgurl);img.onerror = () => reject(new Error(imgurl + " load error"));});});return Promise.all(picsAll).then(() => {return true;}).catch(() => {// TODO 添加重试机制return false;});
}

如何判断图片加载完成相关推荐

jquery图片加载失败
JavaScript判断远程图片是否存在,加载完成:onerror 属性- & jQuery实现(如果因为网络或图片的原因发生异常,则显示该图片)~ </head><body ...
canvas loadImage图片加载
canvas 图片加载以及图片切换显示 canvas 加载图片使用loadImage函数,参数传递:图片路径,当图片加载完成onImageLoaded触发,通过can.isImageLoaded(u ...
Opencv判断是否加载图片的两种方法
加载图片是图像处理最基本的操作,但有的时候我们加载图片会因为图片路径不正确或者没有图片等原因而报错,经常写代码的凭经验就知道是哪错了,但初学者一般是看不懂这些错误,就会很恼火了,如果加个判断语句就 ...
Swift - 表格图片加载优化（拖动表格时不加载，停止时只加载当前页图片）
列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIn ...
Service Worker 图片加载失败处理
Service Worker 图片加载失败处理参考文档 git clone https://gitee.com/wjj0720/Service-Worker.git 运行 npm i npm sta ...
android 图片加载软引用_Android 解决图片大量下载：软引用必须懂4点
1.对象的强.软.弱和虚引用为了能更加灵活控制对象的生命周期,需要知道对象引用的4中级别,由高到低依次为 :强引用.软引用.弱引用和虚引用备注: 这四种的区别: ⑴强引用(StrongRefere ...
不需要任何依赖的图片加载错误处理的工具类load-image.js
需求的诞生: 先简单介绍一下业务场景,我们的项目是一个微博舆情分析系统,可以根据用户设置的关键字监测相关微博舆情,并进行实时推送.监测范围涵盖境内和境外微博平台(境内:新浪.腾讯,境外:twitter ...
js img图片加载失败，重新加载+断网检查
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片 //js方法定义 function re ...
ios新手开发——toast提示和旋转图片加载框
不知不觉自学ios已经四个月了,从OC语法到app开发,过程虽然枯燥无味,但是结果还是挺有成就感的,在此分享我的ios开发之路中的小小心得~废话不多说,先上我们今天要实现的效果图: 有过一点做APP经 ...

如何判断图片加载完成

项目场景：

问题描述

解决方案：判断图片加载完成

如何判断图片加载完成相关推荐

最新文章

热门文章