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

背景

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

写在最后

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

相关推荐
张晓~183399481211 天前
碰一碰发抖音源码技术搭建部署方案
线性代数·算法·microsoft·矩阵·html5
某柚啊2 天前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
huangql5203 天前
截图功能技术详解:从原理到实现的完整指南
前端·html5
java水泥工4 天前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示
月光技术杂谈4 天前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
.生产的驴5 天前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
ZTLJQ6 天前
植物大战僵尸HTML5游戏完整实现教程
前端·游戏·html5
Hello123网站6 天前
300多个Html5小游戏列表和下载地址
前端·html·html5
rising start7 天前
前端基础一、HTML5
前端·html·html5
tryCbest8 天前
Html5实现弹出表单
html5