intersectionobserver 初始化时不触发回调，是因为创建后不会自动检测已存在目标元素是否可见，必须显式调用observe()注册；且threshold设得过高（如[0.1]）易错过初始进入视口状态。
IntersectionObserver 初始化时为什么图片不触发回调
常见现象是页面加载后，IntersectionObserver 一直没执行回调，哪怕图片明明在视口里。根本原因是：observer 创建后，**不会自动检查已存在的目标元素是否满足条件**，必须显式调用 observe() 注册每个目标。如果注册前元素已进入视口，且 threshold 又设得偏高（比如 [0.1]），就可能错过初始状态。
实操建议：
- 确保在 DOM 就绪后（如
DOMContentLoaded或组件mounted阶段）再创建 observer 并逐个调用observe(imgEl) -
threshold推荐设为[0]或[0, 0.01]，避免因滚动精度或布局抖动导致漏触发 - 若需兼容首屏图片，可先手动检查
imgEl.getBoundingClientRect().top ，满足则立即添加 <code>visible类
如何让图片从透明到不透明平滑过渡
仅靠 IntersectionObserver 切换类名还不够——CSS 动画必须作用于 opacity 且有明确的 transition 声明，否则会突变。关键点在于：动画起始态（未进入视口）必须是 opacity: 0，且该样式不能被其他规则覆盖（比如内联 style="opacity:1" 会阻断 transition）。
实操建议：
- 给图片默认加类
fade-in-img，CSS 中写：.fade-in-img { opacity: 0; transition: opacity 0.4s ease-out; }<br>.fade-in-img.visible { opacity: 1; } - 避免在 HTML 中写
style="opacity: 1"或用 JS 直接设img.style.opacity = 1，这会覆盖 CSS transition - 若需更精细控制（如延迟、缩放），可用
transform: scale(0.95)配合opacity，但注意transform不触发重排，性能更好
为什么滚动过快时部分图片跳过动画直接显示
本质是浏览器渲染帧率与 IntersectionObserver 回调时机不一致：当用户快速滚动，某些元素可能“闪入闪出”视口，导致 isIntersecting 在单次回调中为 false → true → false，而你的逻辑只监听了 true 就加类，却没处理 false 时的清理（比如移除 visible 类）。结果就是上一帧刚加的类没被清除，下一帧又加一次，动画被中断。
实操建议：
- 回调中必须区分状态：
if (entry.isIntersecting) {<br> entry.target.classList.add('visible');<br>} else {<br> entry.target.classList.remove('visible');<br>} - 若希望“进视口后永远可见”，可在首次进入后调用
unobserve(entry.target)，避免反复触发 - 对懒加载场景，建议搭配
loading="lazy"属性（现代浏览器原生支持），减少首屏资源压力
移动端 Safari 下 IntersectionObserver 失效或延迟明显
iOS 13.4+ 虽已支持 IntersectionObserver，但存在两个典型问题：一是 rootMargin 在某些机型上解析异常（如 "50px" 被忽略），二是页面启用 overflow: hidden 或使用第三方滚动库（如 iScroll）时，observer 无法正确感知滚动容器变化。
实操建议：
- 强制设置
rootMargin: "0px 0px 100px 0px"（下边距加大），给足缓冲区，避免因 Safari 滚动检测延迟导致错过 - 若页面滚动容器不是
window（如某个div设置了overflow-y: auto），必须显式传入root: document.querySelector('.scroll-container') - 降级方案：对不支持的旧版 Safari，用
getBoundingClientRect()+scroll事件手动判断，但务必节流（requestAnimationFrame包裹）
root 和 rootMargin 就固定了，后续动态修改容器尺寸或滚动上下文时，必须重新创建 observer —— 这点在 SPA 页面路由切换或弹窗展开后常出问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
