浏览器API_Intersection Observer使用-js教程-PHP中文网

浏览器API_Intersection Observer使用

紅蓮之龍

发布： 2025-11-30 19:46:02

原创

106人浏览过

Intersection Observer API用于监听元素是否进入视口，支持懒加载、动画触发和埋点上报。通过创建observer实例并配置threshold、rootMargin等参数，可在元素可见时执行回调，相比scroll事件更高效。典型应用包括图片懒加载（读取data-src）、视入动画（添加类名）和内容曝光统计（上报埋点）。需注意兼容性处理、及时调用unobserve()和disconnect()释放资源。该API简化了可见性检测逻辑，提升性能与可维护性。

浏览器api_intersection observer使用

Intersection Observer 是浏览器提供的 API，用来监听某个元素是否进入或离开视口（viewport），或者另一个容器。它比传统的 scroll 事件 + getBoundingClientRect() 手动计算要高效得多，特别适合实现懒加载、无限滚动、埋点上报等场景。

基本用法

创建一个 IntersectionObserver 实例，传入回调函数和配置项：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素可见', entry.target);
      // 可以在这里加载图片、触发动画等
    }
  });
}, {
  threshold: 0.1, // 元素10%可见时触发
  rootMargin: '0px' // 可添加外边距，如 '50px'
});

// 开始观察某个元素
observer.observe(document.querySelector('#my-element'));

登录后复制

说明：

entries：是所有被监听元素的状态数组，每个 entry 包含 isIntersecting（是否相交）、intersectionRatio（交叉比例）等信息。
threshold：可以是 0 到 1 的数值或数组，表示触发回调的交叉比例。设为 0 表示一有交集就触发，1 表示完全可见才触发。
root：指定根容器，默认是浏览器视口。也可设为某个 DOM 元素。
rootMargin：类似 CSS margin，可扩大或缩小根容器范围，常用于提前触发加载。

常见应用场景

这个 API 非常实用，以下是几个典型用法：

1. 图片懒加载

页面初始只加载占位图，当图片区域进入视口再加载真实图片：

MimicPC

一个AI驱动的浏览器运行工具，可以通过浏览器在线安装及运行各种开源的AI应用程序

查看详情

const imgObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 将 data-src 赋值给 src
      imgObserver.unobserve(img); // 加载后停止监听
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  imgObserver.observe(img);
});

登录后复制

2. 触发进入动画

当某个模块滑入视野时，添加“显示”类名来触发动画：

const animateObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
      animateObserver.unobserve(entry.target);
    }
  });
}, { threshold: 0.2 });

document.querySelectorAll('.animate').forEach(el => {
  animateObserver.observe(el);
});

登录后复制

3. 监听广告或内容曝光

用于统计用户是否“看到”了某块内容，适合做埋点：

const trackObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
      // 内容至少50%可见，上报一次
      ga('send', 'event', 'content', 'view', entry.target.id);
      trackObserver.unobserve(entry.target); // 只上报一次
    }
  });
}, { threshold: 0.5 });

登录后复制