端内瀑布流展示图片/商品图,点击跳转二级页,二级页面若是可滑动的图片列表,可以使用带图加载来优化视觉上的首屏时间
待更新:分块渲染 骨架屏占位
带图加载
简要分享下实现思路:
- generateCDNImageUrl 处理图片,可强制https/添加参数/增加水印,经过云端处理生成新的链接 preLoadImg
- 跳转链接加图片参数跳转如 &pre_laod_img=preLoadImg
- 二级页面检验pre_laod_img是否真可用(防止恶搞截图,带节奏),如果可用,则展示preLoadImg占位
- 在列表图片的第一张图加载完毕后,清理掉带图
const firstImg = new Image()
firstImg.src = list[0].url;
firstImg.onload = ()=>{
// 隐藏带图加载的图片
}
5.清理带图展示模块后,此时展示的是真实的图片列表
PS: 图片列表,可以用better-scroll,移动端和PC端都挺好!
牛马原则,不用自己费脑子写的,就不自己写。大佬们写得还更好用,哈哈哈。