图片懒加载抖动的根本原因是未提前占位，解决关键是html解析阶段用width/height属性或css aspect-ratio锁定容器空间，配合object-fit和占位图确保首帧稳定。
图片懒加载时页面抖动，根本原因是浏览器不知道图片该占多大空间——加载前高度为0，加载后突然撑开，下方内容被顶下去。解决的关键不是等JS补尺寸，而是在HTML解析阶段就锁定占位。
必须设置宽高属性或CSS宽高比
浏览器靠width和height属性（像素值）推算原始宽高比，首帧就能预留空间。哪怕你用max-width: 100%做响应式，也得先写上真实尺寸：
<img src="a.jpg" style="max-width:90%" style="max-width:90%" loading="lazy" alt="...">- 不要写
width="100%" height="auto"——这等于没告诉浏览器高度 - 服务端渲染或构建工具可自动注入尺寸，比人工填更可靠
用aspect-ratio替代padding-bottom技巧
现代方案用CSS aspect-ratio控制容器占位，更语义、更易维护：
- 给图片外层加容器：
<div class="img-wrap"><img></div> - CSS中：
.img-wrap { aspect-ratio: 16 / 9; width: 100%; } -
img设width: 100%; height: 100%; object-fit: cover; - 注意：Safari 15.4+才完整支持，老版本需降级回
padding-bottom
src不能为空，必须提供占位图
loading="lazy"只管加载时机，不管占位。如果src留空或无效，图片区域就是塌陷的：
- 用1×1 base64 GIF：
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" - 或极简SVG占位：
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E" - 避免只写
data-src而没设src——SEO会降权，布局必抖
JS懒加载要配合防重复与过渡
用IntersectionObserver手动控制时，细节决定是否真稳：
- 观察器设
rootMargin: "100px"提前触发，防止快速滚动时闪白 - 判断
entry.isIntersecting === true后再赋值img.src = img.dataset.src - 立刻调用
observer.unobserve(img)，避免反复回调 - 加淡入过渡：
img { opacity: 0; transition: opacity .3s; } img[src] { opacity: 1; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
