关于优化活动页面的大尺寸图片的展示问题

背景

在处理一个对清晰度要求较高的页面时，由于可渲染的图片达到了3840 * 10k的分辨率，所以前端这边在接收到活动页面的图片会相当大（2MB起步的），然后就会出现一个图片缓慢从上到下渲染的过程动画，对于C端的产品，这种交互一定是不及格的

如下：

load-image

目的

处理掉视频中的加载过程，其实在此过程中，发出了图片链接请求，所以缓慢的加载出来【当然大资源的图片才会明显】

思路

让资源预先加载 完成，然后我们直接把加载好的图片插入到页面中

解决方案

顺着以上的思路，那我们用代码的形式表示就是
这里还是要说明下，以下的处理方式适合博主自己的场景，大家可以把该功能套进去自己的实际场景使用，我是刚好碰到在当前页面要加载，如果大家的资源是可以在空闲时间加载（这样更完美），那可以考虑加入store来管理已经加载好的图片资源，在适当的时候插入页面节点就可以了

javascript 复制代码

function LoadImage() {
  const [imgContent, setImg] = useState<HTMLImageElement>();
  const imgRef = useRef<HTMLDivElement>(null);
  
  useMount(async () => {
    const img = await previewLoadImg(testUrl);
    setImg(img);
  });

  // 这里留个todo 因为并不是所有情况都会使用的
  // todo: 如果当前加载的图片会更新的话，需要个remove方法，来清除已经插入的img节点
  useEffect(() => {
    imgRef.current && imgContent && imgRef.current.appendChild(imgContent);
  }, [imgRef, imgContent]);

  return (
    <div className="load-image">
        <div ref={imgRef}></div>
    </div>
  );
}

utils.ts

javascript 复制代码

/**
 * 预加载图片
 * @param {string} url 图片url
 */
export function previewLoadImg(url: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = function () {
      resolve(img);
    };
    img.onerror = function () {
      reject(new Error(`${url}加载失败`));
    };
  });
}

// 很多时候我们会批量处理图片，这里也给大家一个批次的方法
/** 批量预加载图片 */
export async function batchPreviewLoadImg(urlList: string[]) {
  const imgList = await Promise.allSettled(urlList.map((url) => previewLoadImg(url)));
  return imgList.map(item => ({
    status: item.status,
    value: item.status === 'fulfilled' ? item.value : item.reason
  }));
}

写在最后

如果觉得该篇幅帮助到了大家，记得给用心的博主点个赞，让他知道开心开心，有你们的支持是我更新下去的最大动力！