解决antd的Image组件打开大图片无反应

更新: 1970/1/1 08:00:00

一、问题背景

在使用 antd 的 Image 组件时，是图片加载好了才会打开显示，如果图片过大，加载的时间内页面就无任何效果，影响了用户交互

---

二、关键代码

我们可以手动给当前页面新增一个 loading 效果，这样用户就不会误认为是没有点击了

const [previewUrl, setPreviewUrl] = useState("");
const [previewLoading, setPreviewLoading] = useState(false);
/**
 * 预览或下载附件
 * @param fileUrl 附件地址
 */
function previewFile(fileUrl: string | undefined): void {
  if (!fileUrl) return;

  // 是图片时，使用Image组件预览
  if (isImageUrl(fileUrl)) {
    setPreviewLoading(true);
    const img = new window.Image();
    img.src = fileUrl;
    img.onload = () => {
      setPreviewUrl(fileUrl);
      setPreviewLoading(false);
    };
  } else {
    // 否则使用浏览器默认方式打开
    window.open(fileUrl);
  }
}
/**
 * @description 预览状态改变
 * @param {boolean} vis 是否预览
 */
function handlePreviewChange(vis: boolean) {
  // 不预览时置空预览链接
  if (!vis) {
    setPreviewUrl("");
    setPreviewLoading(false);
  }
}
return (
  <div style={{ position: "relative" }}>
    {previewLoading && (
      <div className="global-loading-overlay">
        <Spin tip="图片加载中..." size="large" />
      </div>
    )}
    <KoalaDrawer></KoalaDrawer>
    <Image
      src={previewUrl}
      style={{ display: "none" }}
      preview={{
        visible: !!previewUrl,
        onVisibleChange: handlePreviewChange,
      }}
    />
  </div>
);

// 打开大图片的加载loading效果
.global-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

三、最终效果