intersectionobserver.observe()仅触发回调，不自动加载css；需手动创建link、插入head、监听load并防重复，否则导致fouc或白屏。
为什么只用IntersectionObserver.observe()无法加载CSS
IntersectionObserver 本身不处理资源加载，它只告诉你 entry.isIntersecting 变为 true 的时机。如果你在回调里只调用了 fetch() 或什么也不做，样式根本不会出现——浏览器不会自动把响应内容当 CSS 解析并应用。常见现象是：元素已进视口、回调也执行了，但页面毫无变化，甚至闪一下才补上样式，这就是“触发了，但没加载完”的典型表现。
动态插入必须走完四步闭环
漏掉任一环，就会导致 FOUC（无样式内容闪烁）、白屏、样式错乱或静默失效。核心动作只有四步，每步都有明确检查点：
- 查重：用
new Set()全局记录已加载的 URL，每次插入前先if (loadedCSS.has(url)) return - 创建：
link.rel = "stylesheet"必须显式设置（不能靠默认值），link.href = url赋值后才插入 DOM - 插入：必须用
document.head.appendChild(link)，插到body或任意 div 里都可能被忽略或阻塞时机错乱 - 监听：推荐
link.addEventListener("load", handler, { once: true })+setTimeout(() => { /* 超时降级 */ }, 5000)，避免 Safari 或某些安卓 WebView 中onload不触发导致卡死
离屏组件 CSS 加载要防 FOUC，得加占位样式
如果目标组件 DOM 挂载时没有样式，浏览器会先渲染无样式的 HTML，等 CSS 加载完成再重绘，用户就看到“闪一下”。解决办法不是等 CSS 加载完再挂载 DOM，而是提前给容器加轻量占位样式：
- 对目标元素设
opacity: 0.01或visibility: hidden，确保布局稳定且不可见 - 在
link.onload触发后，再移除占位类、添加业务类（如component-loaded） - 避免用
display: none占位——它会破坏 layout flow，导致后续动画定位偏移
rootMargin 和 threshold 配合不好，动画会“抢跑”或“迟到”
比如设 rootMargin: "0px 0px -20% 0px" 是为了让样式提前加载，但 Safari 15.4 以下不支持百分比值，实际会被截断为 "0px"，结果动画等到元素完全进视口才触发。更麻烦的是，如果组件结构复杂、CSS 文件大，而 threshold: [0] 又太敏感，可能在元素刚露头 1px 时就触发加载，但样式还没来得及生效，用户仍看到 FOUC。
稳妥做法是：
- 对关键离屏组件，用
threshold: [0.1]（10% 进入才触发），降低误判率 - 在 iframe 沙箱或 file:// 环境下，优先显式指定
root: document.querySelector('.container')，绕过视口计算偏差 - 加载失败时降级：超时后直接
document.body.classList.add('css-fallback')，用内联基础样式兜底
真正难的不是写几行 Observer 代码，而是把“检测→加载→注入→确认→降级”这条链路上每个环节的边界条件都覆盖住。尤其是 link.onload 在旧环境不可靠、rootMargin 在沙箱中归零、以及多个同 URL 的 link 被重复插入——这些坑不踩一遍，很难写出健壮的按需 CSS 加载逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
