聊聊 Intersection Observer，先说个故事

你打开一个图文并茂的网页，哎呀，图片像雪片一样砸下来。

哈哈，这种卡顿感谁dou受不了。

其实背后是浏览器在抢着下载所有图片，带宽被塞满了。

咱就是说Ru果Neng让图片等到真的要展示时才去请求，那体验立马飞起。

说实话，这正是 Intersection API Neng帮我们干的事儿。

IntersectionObserver 是原生提供的观察者对象。

它会监测目标元素和视口的交叉比例。

只要交叉比例大于阈值，就会回调一次。

这回调里你Ke以把 img 的 src 改成真实地址，懒加载就这么简单。

别忘了给根元素加点 margin，让图片提前预加载，滚动时geng丝滑。

第一步，给每张 img 加上占位图或空 src。

第二步，用 data-src 保存真实 URL。

第三步，在 JavaScript 里创建 observer：

const observer = new IntersectionObserver => {
    entries.forEach(entry => {
        if  {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve;
        }
    });
}, {
    rootMargin: '0px 0px 200px 0px',
    threshold: 0
});
document.querySelectorAll.forEach);

kan到没有？几行代码搞定！

1️⃣ 有的老旧浏览器根本不支持 IntersectionObserver，需要 Polyfill。

2️⃣ Ru果你用了 lazyload 插件，又手动写了 observer，记得别重复监听，不然会冲突。

3️⃣ 对于首屏重要图片，Zui好直接写 src，别让它等到滚动才出现，否则 FCP 会被拖慢。

在不支持的环境里Ke以引入官方的 polyfill 脚本，它会模拟 observe 方法，把 scroll + getBoundingClientRect 的逻辑包装起来。

不过老实说用原生的geng省事儿，也geng高效，因为浏览器内部Yi经把计算合并进渲染流水线了。

问题： 我用了 IntersectionObserver 懒加载，结果百度蜘蛛爬不到这些图，导致搜索流量下降，咋回事？

答案： 百度抓取时默认不会触发 JS 动态加载，也就是说它只kan到占位图或空 src 的标签。于是这些图片被认为是“无内容”。

解决办法：

在首屏关键图片上保留真实 src，不走懒加载；

为每张懒加载图加上 ；

使用结构化数据告诉搜索引擎这是一张有效图片；

Ru果Ke以的话，在服务端渲染阶段直接输出完整 img 标签；

A/B 实验里我把同一页面分成两组，一组用普通加载，一组用 IntersectionObserver 懒加载。

E‑Metrics 显示：首屏 LCP 降低约 30%，整体页面下载体积也少了 20% 左右。.....