Intersection Observer API 文档

📌 用于监测元素与视口或指定目标的交集变化，优化页面性能

📚 基本概念

Intersection Observer API 是现代浏览器提供的懒加载和可见性检测解决方案，通过 IntersectionObserver 类实现。
它解决了传统 scroll 事件监听导致的性能问题，尤其适合处理图片懒加载、动态加载内容等场景。

🛠️ 核心用法

创建观察器
```
const observer = new IntersectionObserver(callback, options);
```
- callback：回调函数，接收 intersectionEntries 参数
- options：配置参数（如 threshold、rootMargin）
开始观察
```
observer.observe(targetElement);
```
停止观察
```
observer.unobserve(targetElement);
```

🧪 实例演示

<img src="loading.jpg" data-src="image.jpg" alt="示例图片" />
<script>
  const img = document.querySelector('img');
  const observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) {
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    },
    { threshold: 0.1 }
  );
  observer.observe(img);
</script>

📌 该示例展示如何在元素进入视口10%时加载图片

⚠️ 注意事项

需要 HTTPS 环境才能使用（部分浏览器强制要求）
支持 Chrome 51+、Firefox 57+、Safari 11.1+
推荐配合 loading="lazy" 属性使用

📚 相关文档

Intersection Observer API