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

背景

在处理一个对清晰度要求较高的页面时,由于可渲染的图片达到了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
  }));
}

写在最后

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

相关推荐
cooldream20091 天前
深度解析中秋节HTML5动画的实现
前端·html·html5
皮蛋瘦肉粥_1212 天前
pink老师html5+css3day06
前端·css3·html5
庵中十三居士4 天前
在线音频三选一强制选择测试(3-AFC)
html5
知识分享小能手5 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
皮蛋瘦肉粥_1217 天前
pink老师html5+css3day02
前端·css3·html5
卓码软件测评7 天前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
java水泥工8 天前
基于Echarts+HTML5可视化数据大屏展示-智慧消防大屏
前端·echarts·html5
xhload3d10 天前
智慧停车场合集 | 图扑数字孪生静态交通一网统管
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·智慧停车·智慧交通·轻量化·电力能源·智慧停车场·智慧停车楼
合作小小程序员小小店11 天前
web开发,在线%车辆管理%系统,基于Idea,html,css,vue,java,springboot,mysql
java·spring boot·vscode·html5·web app