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

背景

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

写在最后

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

相关推荐
卿·静1 天前
Node.js轻松生成动态二维码
前端·javascript·vscode·node.js·html5
光年像素1 天前
前端开发的“三剑客”—— HTML、CSS、JavaScript
javascript·css·html5
learning_tom2 天前
HTML5 标题标签、段落、换行和水平线
前端·html·html5
翻斗花园刘大胆3 天前
JavaSE之String 与 StringBuilder 全面解析(附实例代码)
java·开发语言·jvm·git·java-ee·intellij-idea·html5
空山新雨(大队长)3 天前
HTML第四课:个人简介页面开发
html5
小菜全3 天前
基于若依框架开发WebSocket接口
java·javascript·maven·mybatis·html5
java水泥工4 天前
基于Echarts+HTML5可视化数据大屏展示-惠民服务平台
前端·echarts·html5
LilyCoder4 天前
HTML5国庆网站源码
前端·html·html5
xhload3d4 天前
场景切换 × 流畅过渡动画实现方案 | 图扑软件
物联网·3d·智慧城市·html5·动画·webgl·数字孪生·可视化·虚拟现实·工业互联网·工控·工业·2d·轻量化·过渡动画
自动花钱机6 天前
从零开始配置前端环境及必要软件安装
前端·javascript·vue.js·css3·html5