Intersection Observer API 实现图片懒加载
请详细解释 Intersection Observer API 的工作原理，并用它实现一个图片懒加载组件。说明 threshold、rootMargin 和 root 参数的作用。
回答
Yahuda
Intersection Observer 监测元素与视口(或根元素)的交叉状态。核心用法: new IntersectionObserver(callback, {root, rootMargin, threshold})。callback 接收 entries 数组，每个 entry 包含 isIntersecting、intersectionRatio、boundingClientRect 等属性。实现懒加载：将 img 的 data-src 存真实 URL，observed 进入视口时赋值给 src 并 unobserve。threshold 可以是数组如 [0, 0.5, 1] 表示交叉比例到达这些值时触发；rootMargin 类似 CSS margin 扩展/缩小检测区域。性能优势：异步执行，不阻塞主线程，比 scroll + getBoundingClientRect 高效得多。注意：旧浏览器需 polyfill，且 callback 在 iframe 中可能受限制。