IntersectionObserver 判断图片是否进入可视区的核心是监听元素是否出现在视口内，而非依赖 scroll 事件反复计算位置；需设 threshold 为 [0] 或配合 rootMargin 提前触发，仅观察带 animate-on-enter 类的 img，触发后添加 is-animated 类并停止观察，动画由 CSS 控制且初始状态禁用，兼容性差时需降级为节流的 scroll + getBoundingClientRect。
核心是监听元素是否出现在视口内，而不是靠 scroll 事件反复计算位置——后者性能差、易卡顿，且在 Safari 或低配设备上容易漏触发。
关键点：
IntersectionObserver 的 threshold 设为 [0]（默认）即可在元素刚进入视口时触发；若想更早触发（比如提前 50px），可设为 [0.1] 或配合 rootMargin
animate-on-enter）的 observer.unobserve(el)，防止重复执行动画动画本身写在 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;
}
注意不要在 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);
});
IE 完全不支持 Intersec，Safari 12.1+ 才支持。如果需兼容旧版 Safari 或 IE，得降级为 scroll 事件 + 
getBoundingClientRect()，但务必加节流（throttle）。
另外几个容易踩的坑：
getBoundingClientRect() 可能返回 { height: 0 }，导致观察器误判；建议先等 img.onload 或用 loading="lazy" 配合 decode() 提前解码forwards 必须写，否则动画结束后会回退到初始状态（比如又变透明）max-width: 100%），确保父容器有明确宽度，否则动画位移可能错位