如何利用Intersection Observer每次检测图片进入视口？当前代码仅触发首次

• 你当前代码只监听了容器#main-container，而非单个图片元素，这是没法检测每张图片进入视口的核心原因。
• 另外，回调里只处理了第一个entry，但观察者可能同时返回多个元素的交叉状态变化，得遍历所有条目。
• 要是需要每次图片进入视口都触发操作，别调用unobserve，保持监听状态就行。

修正后的代码：

// 创建IntersectionObserver实例
const observer = new IntersectionObserver((entries) => {
  // 遍历所有状态变化的元素
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(`图片 ${entry.target.src} 进入视口`);
      // 在这里添加你需要执行的操作，比如懒加载图片、启动动画等
    }
  });
}, { threshold: [0] });

// 选中容器内所有img元素，逐个添加监听
document.querySelectorAll("#main-container img").forEach(img => {
  observer.observe(img);
});

补充说明：

• document.querySelectorAll("#main-container img") 精准选中目标文章容器里的所有图片，避免监听无关元素。
• 遍历entries能同时处理多张图片进入视口的情况，不会遗漏任何触发事件。
• 只要图片从视口外进入视口（交叉状态变为true），就会触发回调，完全满足每次进入都执行操作的需求。

内容的提问来源于stack exchange，提问作者Richard