react/vue中前端多图片展示页面优化图片加载速度的五种方案

需求背景

在多项目中 例如官网项目中 会出现很多大图片显示的情况  这个时候就会出现图片过大  公司带宽不够之类导致页面加载速度过慢及页面出现后图片仍然占位但并未加载出来  或者因为网络问题导致图片区域黑块等等场景  这个时候我们就要对图片和当前场景进行优化

方案定义

  1. 图片更换为avif或者webp格式缩减图片大小,若svg可对svg进一步压缩,vscode中有很多插件支持,但是没有直接使用avif和webp格式效果好
  2. 若公司有cdn合作商,可传入cdn,页面直接使用cdn链接
  3. nginx配置brotli压缩进一步压缩体积
  4. nginx配置开启浏览器缓存,提高后期体验感
  5. 对banner或主图进行预加载操作,其他图片正常使用懒加载,使其队列进行优先加载变化及优化后期例如国际化切换效果无感卡顿

预加载实现

//下方主要实现代码 需要放入vue的mounted或者react的useEffect中 banner1和banner2是首页顶部大图中英文两图  
const preloadImages = [banner1, banner2];
    preloadImages.forEach((src) => {
      const img = new Image();
      img.src = src;
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值