列表滚动时图片陆续加载,内容不断往下跳,点错链接。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,图片加载前没有占位尺寸,加载完成后高度突变推动下方内容,用户正在点的位置就发生了偏移。
「图片布局偏移」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。报错里带路径的,先去看那个路径在不在、权限对不对。
img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #eee; }
同一份配置存在多处的,先确认改的是被加载的那一份。新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。
备份不是备了就行,恢复一次才算数,很多备份文件打开才发现是空的。接口问题先分清是没发出去、发出去了没收到,还是收到了处理失败。
具体做法是,给图片容器预设宽高比;图片本身写死宽高属性;配合占位背景色过渡。
最后用这个标准收尾,图片加载前后高度一致,滚动过程无跳动。