项目场景:

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

问题描述

临时添加‘‘展开-收起’’功能。所以简单的通过话术内容所在的div的高度判断是否展示‘展开-收起’按钮。
由于机器人的话术配置支持富文,也就不可避免的支持图片上传(重写了富文本的图片上传功能,图片存储的是对应fileService的地址具体实现可以参考这篇文章),在对话时渲染机器人话术通过Vuev-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;
    });
}
Logo

前往低代码交流专区

更多推荐