【H5】带图加载

23 阅读1分钟

端内瀑布流展示图片/商品图,点击跳转二级页,二级页面若是可滑动的图片列表,可以使用带图加载来优化视觉上的首屏时间
待更新:分块渲染 骨架屏占位

带图加载

简要分享下实现思路:

  1. generateCDNImageUrl 处理图片,可强制https/添加参数/增加水印,经过云端处理生成新的链接 preLoadImg
  2. 跳转链接加图片参数跳转如 &pre_laod_img=preLoadImg
  3. 二级页面检验pre_laod_img是否真可用(防止恶搞截图,带节奏),如果可用,则展示preLoadImg占位
  4. 在列表图片的第一张图加载完毕后,清理掉带图
const firstImg = new Image()
firstImg.src = list[0].url;
firstImg.onload = ()=>{
// 隐藏带图加载的图片
}

5.清理带图展示模块后,此时展示的是真实的图片列表

PS: 图片列表,可以用better-scroll,移动端和PC端都挺好!

juejin.cn/post/695650…

牛马原则,不用自己费脑子写的,就不自己写。大佬们写得还更好用,哈哈哈。