瀑布流图片懒加载不准的根源在于加载前位置未知，需通过预设宽高、aspect-ratio、延迟赋值src、正确配置intersectionobserver根元素及错误兜底来解决。
关键不在“什么时候加载”，而在于“加载前是否已知位置”——瀑布流中图片懒加载不准，90%是因为浏览器还没算出它该落在哪一列就急着赋值 src，结果先挤进第一列、再跳到目标列，造成闪烁或错位。
必须提前预留占位空间
图片没设宽高或 aspect-ratio，加载前高度为 0，Masonry 或 JS 列高计算全失效。此时 IntersectionObserver 即使触发，getBoundingClientRect() 返回的位置也是错的。
- 服务端渲染时直接写死
<img src="x.jpg" style="max-width:90%" style="max-width:90%"> - 客户端动态插入前，用
new Image()预读尺寸，或从 URL 元信息/接口响应中提取宽高 - CSS 中统一用
aspect-ratio: 3/2+width: 100%，兼容现代浏览器且免 JS 计算 - 避免只设
max-width: 100%而忽略原始比例，否则容器缩放会反复触发布局
监听时机要等“位置稳定”再加载
不能一进视口就立刻赋值 src。得确认该图已被正确分配到某一列、且列容器已更新高度，否则 JS 布局逻辑还没跑完，图片就强行渲染了。
- 在
IntersectionObserver回调里，先调element.getBoundingClientRect()检查是否已有有效 top/left 值（非 0） - 配合
requestIdleCallback延迟赋值，让主线程有空完成布局计算 - 若用 Masonry 库，优先启用其内置的
imagesLoaded插件，等图片真实加载完毕再调layout() - 动态插入新图时，用
msnry.appended(els)+imagesLoaded(els).on('always', () => msnry.layout())，不重初始化
根容器和滚动上下文必须显式指定
默认以 viewport 为根，但瀑布流容器若自带 overflow-y: auto，或父级有 transform/overflow: hidden，Observer 就无法正确判断相交状态。
- 显式传入
{ root: null, rootMargin: '100px' }，确保以 viewport 为根并预留缓冲区 - 若瀑布流自身可滚动（如弹窗内瀑布流），则
root: document.querySelector('.masonry-container') - 检查图片 DOM 是否已挂载：动态插入后，需等
appendChild完成再调observer.observe(img) - 旧浏览器用 polyfill 时注意：
rootMargin只支持 px，不支持百分比
加载失败要兜底，否则留白卡住整个列
一张图加载失败，若没 fallback 占位或错误处理，对应列高度就停在半截，后续所有图都会错位。
- 给
<img>绑定onerror，自动替换为灰底占位图或文字提示 -
imagesLoaded不监听 error，需手动 catch 并调用msnry.layout()强制重排 - 懒加载过程中，可用
loading="lazy"+decoding="async"交由浏览器调度解码，减轻主线程压力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
