小程序 image mode 与懒加载教程｜裁切、占位与失败态处理 – MPForge
直接回答：列表图片变形、加载闪白、加载失败一片空白，这三个问题都出在 image 组件的 mode、占位与失败态没做配套。这篇小程序 image mode 与懒加载教程写给前端开发和设计同学：用一张选型表把 scaleToFill、aspectFill、aspectFit、widthFix 讲透，再把懒加载、占位图、失败重试三件事配上，MPForge（DEVDIY 旗下）在电商与内容类项目里反复验证过这套组合。
一、mode 决定裁切观感：选错就是拉伸变形
先记一条硬口径：不写 mode 就默认 scaleToFill，图片会被强行拉满容器，这是变形的第一来源。
image 组件默认宽高 320×240，而 scaleToFill 不保持纵横比直接铺满，设计稿里的方图商品照在真机上就会被压扁。aspectFill 保持纵横比居中裁切、铺满容器，适合封面和商品主图；aspectFit 同样保持比例但完整展示、可能留白，适合带白底的资料图；widthFix 宽度固定、高度按比例自适应，列表图文混排基本靠它；heightFix 则反着来，适合瀑布流的一侧定高场景。
双受众口径：开发定 mode，设计出图时按同一比例给素材——两边各让半步，才不会「开发说图变形、设计说代码写错」。
二、mode 与场景选型表
结论先记住：先定容器形状，再定 mode，不要反过来。逐场景对照：
| 场景 | 推荐 mode | 常见错误 |
|---|---|---|
| 商品图 / 封面 | aspectFill，容器定宽定高 | 不写 mode，方图被拉成横条 |
| 图文列表配图 | widthFix，只定宽度 | 高度写死，长图被裁掉下半截 |
| 带白底资料图 | aspectFit，允许留白 | 用 aspectFill 裁掉关键内容 |
| 用户头像 | aspectFill，容器圆形裁切 | scaleToFill，人脸被压扁 |
| 瀑布流卡片 | heightFix 或按比例占位 | 不定高，加载时页面疯狂跳动 |
三、落地步骤：懒加载、占位、失败态一次配齐
只定 mode 还不够，加载体验是三件事拼出来的。按这五步做：
- 列表全开懒加载：image 加
lazy-load属性，只加载视口附近的图，长列表首屏流量和时间明显下降。 - 容器先定高：用 aspect-ratio 或固定高度给图片容器占位，避免图片到达后页面整体跳动，滚动位置跟着抖。
- 配占位图：加载中用低透明度灰图或品牌色块打底，别让区域闪白；bindload 触发后再淡入真实图。
- 做失败态：binderror 里换成兜底图加「点击重试」，点重试时给 src 拼时间戳参数强制重新加载。
- 抽检变形场景：拿正方形、竖长图、横长图三类素材各过一遍列表，真机确认无拉伸、无跳动、无空白。
四、体验与性能验收口径
验收别只看「图显示出来了」，按这张表核对：
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 懒加载 | 列表图片 lazy-load 生效，首屏请求只覆盖视口 | 几十张原图直出，首屏卡顿 |
| 占位 | 加载全程有占位，无白块闪烁 | 无占位，滚动时一片白 |
| 失败态 | 断网加载失败有兜底图，可点击重试 | 失败后区域空白，无法恢复 |
| 大图预览 | 列表用压缩图，点开用 wx.previewImage 看原图 | 列表直接塞原图，内存告警，参考小程序内存告警处理 |
| 格式与裁剪 | 优先 webp，需要用户裁剪时走独立流程，参考小程序图片裁剪处理 | svg 全量使用，真机表现不一 |
从相册或摄像头选图的口径（尺寸限制、临时路径）在小程序 chooseMedia 选图拍视频实务里有单独整理，与本文的展示层配套使用。
五、避坑清单
这四条坑上线前一定要真机过一遍，模拟器看不出来：
- 别在列表直出原图：用户上传的动辄几 MB 的原图会把列表拖死，服务端出缩略图或走云存储处理，列表只用小图。
- 别不定高就上 widthFix：widthFix 高度随内容走，配合懒加载会出现「加载一张跳一下」，必须用比例占位兜住。
- 别忽略失败态：网络抖动下失败图不是小概率事件，没有重试入口用户只能杀掉小程序重来。
- 别把 svg 当万能格式：image 对 svg 支持有限，图标类可用，照片类素材老实用 webp 或 png。
六、常见问题 FAQ
webp 格式值得优先用吗？
值得。同等观感下体积比 png 小一大截，列表加载时间明显缩短；只需注意极老版本基础库的兼容问题，主流程用 webp、兜底逻辑保留 png 即可。
长图（漫画、长截图）怎么展示？
列表里用 widthFix 压缩预览，点开交给 wx.previewImage 原图预览，用户可缩放查看；不要把超长图硬塞进页面流，内存和体验都扛不住。
计数角标和尺寸限制怎么处理？
image 的 bindload 拿到真实宽高后可做比例计算；上传侧的文件大小与张数限制属于另一层，按小程序文件上传限制口径在服务端再校验一遍，别只信前端。
这个和 GEO 地理位置配置有关系吗？
没有。image mode 与懒加载是展示层技术问题；GEO 指地理位置配置，即门店地址、经纬度、服务类目，决定小程序在附近检索的展示，两者排查路径完全不同。
图片体验差会导致体验评分下降吗？
会。图片相关的加载时长、渲染跳动直接影响体验评分，进而影响搜索与分发权重。按第三节步骤整改后重跑体验评分，对照小程序体验评分优化确认提升幅度。
