IntersectionObserver 判断图片是否进入可视区的核心是监听元素是否出现在视口内，而非依赖 scroll 事件反复计算位置；需设 threshold 为 [0] 或配合 rootMargin 提前触发，仅观察带 animate-on-enter 类的 img，触发后添加 is-animated 类并停止观察，动画由 CSS 控制且初始状态禁用，兼容性差时需降级为节流的 scroll + getBoundingClientRect。
用 IntersectionObserver 判断图片是否进入可视区
核心是监听元素是否出现在视口内，而不是靠 scroll 事件反复计算位置——后者性能差、易卡顿，且在 Safari 或低配设备上容易漏触发。
关键点：
-
IntersectionObserver的threshold设为[0]（默认）即可在元素刚进入视口时触发；若想更早触发（比如提前 50px），可设为[0.1]或配合rootMargin - 只对带特定 class（如
animate-on-enter）的<img>初始化观察器，避免全局监听开销 - 触发后立即调用
observer.unobserve(el)，防止重复执行动画
给图片加 keyframes 动画并控制播放时机
动画本身写在 CSS 里，但初始状态必须是“未激活”，否则页面加载时就播了。常见错误是直接给 img 写 animation: fade-in 0.6s ease-out —— 这会导致所有图片一上来就动。
正确做法是用一个 class 控制动画开关：
立即学习“前端免费学习笔记（深入）”；
- 定义
@keyframes（例如fade-in、slide-up） -
img默认不设动画，只设opacity: 0; transform: translateY(20px); - 添加类名（如
is-animated）后才启用动画和最终态样式
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
img.animate-on-enter {
opacity: 0;
transition: opacity 0.3s ease;
}
img.animate-on-enter.is-animated {
opacity: 1;
animation: fade-in 0.6s ease-out forwards;
}
JS 绑定观察器 + 添加动画 class
注意不要在 callback 里直接操作 style，而是加 class——这样更利于复用、调试和 CSS 覆盖。
示例逻辑：
- 筛选所有
document.querySelectorAll('img.animate-on-enter') - 创建
IntersectionObserver实例，rootMargin可设为'0px 0px -50px 0px'让动画略早于真正进入视口触发 - 回调中检查
entry.isIntersecting，为真则添加is-animated类，并停止观察该元素
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-animated');
observer.unobserve(entry.target);
}
});
}, {
rootMargin: '0px 0px -50px 0px'
});
document.querySelectorAll('img.animate-on-enter').forEach(img => {
observer.observe(img);
});
兼容性与 fallback 注意点
IE 完全不支持 IntersectionObserver，Safari 12.1+ 才支持。如果需兼容旧版 Safari 或 IE，得降级为 scroll 事件 + getBoundingClientRect()，但务必加节流（throttle）。
另外几个容易踩的坑：
- 图片没设置宽高或没加载完成时，
getBoundingClientRect()可能返回{ height: 0 }，导致观察器误判；建议先等img.onload或用loading="lazy"配合decode()提前解码 - CSS 动画的
forwards必须写，否则动画结束后会回退到初始状态（比如又变透明） - 如果图片是响应式（
max-width: 100%），确保父容器有明确宽度，否则动画位移可能错位
