HTML图片懒加载不防布局跳动，需设置宽高或aspect-ratio锁定容器高度，配合有效src占位图与IntersectionObserver提前加载，并添加opacity过渡动画。
HTML图片懒加载本身不解决布局跳动，loading="lazy"只控制请求时机，不提供占位能力。跳动根源是图片加载前无尺寸信息，导致浏览器无法预留空间。真正防抖的关键，在于让图片容器在加载前就拥有确定的高度，再配合轻量占位图和渐进切换逻辑。
必须设置宽高或宽高比
浏览器解析 HTML 时，若 <img> 没有 width 和 height 属性（或 CSS aspect-ratio），初始渲染高度为 0，图片加载后突然撑开，下方内容立刻下移——这就是 CLS（累计布局偏移）的典型来源。
- 推荐优先写 HTML 原生宽高：
<img src="placeholder.gif" width="800" height="600" loading="lazy">，浏览器首帧即知尺寸，兼容性最好 - 响应式场景用
aspect-ratio更灵活：img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; } - 避免仅靠
max-width: 100%或width: 100%，它们不声明高度，无法阻止跳动
src 必须存在有效占位图
loading="lazy" 不会等你 JS 脚本执行才开始占位，它依赖 src 值来渲染初始状态。如果 src 为空、无效或缺失，图片区域直接塌陷，再好的懒加载也救不了布局。
- 用极小 base64 占位图，如：
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="（1×1 透明 GIF，仅 43 字节） - 也可用 SVG 占位：
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E" - 切勿只写
loading="lazy"却留空src，也不要用data-src替代src——浏览器不识别data-src作为占位依据
懒加载触发要提前且可控
仅靠原生 loading="lazy" 在复杂布局（如表格、transform 容器内）容易失效或延迟过晚，导致用户已滚动到图片位置才开始加载，仍可能看到短暂空白。
立即学习“前端免费学习笔记（深入）”；
- 对关键区域（如商品列表、文章配图），建议用
IntersectionObserver主动控制：rootMargin: '100px'提前 100px 加载，避免滚动过快时白屏 - 监听
td或article等父容器，比监听单张img更稳定（尤其表格中） - 加载完成时，把
data-src赋给src，并立即移除data-src防重复触发
加上视觉过渡更自然
即使布局不跳，硬切图片也会显得突兀。加一层淡入动画，能显著提升感知性能。
- CSS 中设初始透明：
img { opacity: 0; transition: opacity 0.3s ease; } - 加载完成后，JS 添加类或直接设
img.style.opacity = 1；也可用属性选择器：img[src] { opacity: 1; } - 搭配
will-change: opacity避免动画卡顿 - 注意：过渡前提是容器高度已锁定，否则 opacity 变化时高度还在变，反而更乱
