rootmargin是解决快速滚动时图片加载滞后的核心参数，通过设置如"400px 0px"扩展视口检测区域，使图片在进入屏幕前预加载；首屏图片必须绕过懒加载逻辑，确保立即渲染。
用户快速滚动时，懒加载图片容易出现“空白闪现”或“加载滞后”，核心问题不是图片没加载，而是加载时机没卡准。关键在于让浏览器提前感知哪些图即将进入视口，并确保首屏及近屏图优先、稳定触发。
用 rootMargin 提前触发加载
Intersection Observer 的 rootMargin 是解决快速滚动的核心参数。它相当于给视口加了一圈“缓冲区”，让图片在真正进入屏幕前就启动加载。
- 设为 "200px"：图片距离视口顶部还有 200px 时就开始加载，适合中速滚动
- 设为 "400px 0px"（上/右/下/左）：对长列表或瀑布流更友好，向下滚动时提前 400px 加载，避免滚到底才触发
- 避免设过大（如 "800px"）：会导致大量非必要预加载，浪费带宽；也别设为 "0px"，快滚时极易错过触发点
首屏图片必须绕过懒加载逻辑
快速滚动的前提是首屏已稳稳呈现——如果 banner、头图、首条商品图也被 lazy 控制，用户刚打开页面就看到占位符，体验直接崩坏。
- 首屏内所有
不加 loading="lazy"，也不进 IntersectionObserver 监听队列
- 服务端渲染（SSR）页面要特别注意：不能因模板统一打标，把首屏图也写成 lazy；可通过 CSS 类（如
.in-viewport）或 DOM 位置（getBoundingClientRect().top ）做静态判断并跳过 - 确保这些图有明确的 width 和 height 属性，防止布局抖动干扰滚动流畅度
加载顺序不依赖滚动事件，而靠浏览器资源调度
不要试图用 scroll + throttle 来“抢”加载——主线程忙于计算位置时，图片请求反而被压后。现代方案应交由浏览器底层调度：
- 对关键首屏图，加 fetchpriority="high"，Chrome 107+ 会提升其网络请求优先级
- 在
中 preload 最重要的 1–2 张图：<link rel="preload" as="image" href="hero.avif"> - 非首屏图用
loading="lazy"即可，无需 JS 干预；浏览器自动按视口距离和资源可用性排序加载
监听器里只做最轻量的事
IntersectionObserver 回调函数一旦臃肿，快滚时会积压任务、延迟图片赋值。务必保持极简：
- 回调中只干两件事：
img.src = img.dataset.src，然后observer.unobserve(img) - 禁止在回调里操作 class、触发动画、发埋点、调用第三方 SDK——这些全挪到
img.onload或requestIdleCallback里 - 提前检查
img.complete：缓存已加载的图直接跳过，避免重复设置 src 导致重请求
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
