html IntersectionObserver监听

2026-04-24 17:00:14 1553阅读 0评论

用 IntersectionObserver 让页面元素“聪明”地出场

在网页上，让元素在合适的时候出现、调整样式，是提升加载性能与视觉体验的关键。IntersectionObserver 为此提供了一种原生、轻量且高效的手段，不需要频繁操作 scroll 事件或埋点。它能根据元素与视窗（或指定的祖先元素）的交集状态，触发回调，帮你把“何时出现、何时变化”这件事交给浏览器来决定。

为什么不用 scroll 或手动节流？

想象你在页面滚动时，给每个元素都绑一个节流函数，或者在 scroll 事件里遍历所有元素判断是否可见，不仅会拖累主线程，还可能把本该在视窗外的元素也频繁计算。而用 IntersectionObserver，让浏览器在它最合适的时机做一次性的观察与判断，既省资源也更稳定。

核心概念与入口

先从创建一个观察器实例开始：

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 触发处理逻辑，比如添加类、加载图片或动画
    }
  });
});

通过 observe 把目标元素加入观察：

observer.observe(targetElement);

你也可以指定观察的根和阈值，让观察更灵活：

const options = {
  root: document.querySelector('#scrollContainer'), // 观察区域
  rootMargin: '0px', // 相对根的边距，支持百分比
  threshold: 0.1,    // 交集比例达到阈值时触发
};

const observer = new IntersectionObserver(entries => {
  // 处理逻辑
}, options);

实战：图片懒加载

在需要延迟加载图片的场景，IntersectionObserver 可以自动在元素进入视窗时加载资源，提升首屏性能。

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy" />

document.querySelectorAll('.lazy').forEach(img => {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const src = img.getAttribute('data-src');
        img.setAttribute('src', src);
        observer.unobserve(img);
      }
    });
  });

  observer.observe(img);
});

实战：动态加载内容

在需要按需加载数据或预渲染内容的场景，IntersectionObserver 可以在元素接近视窗时触发，确保信息在用户最需要的时候出现。

document.querySelectorAll('.content-loader').forEach(loader => {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loader.textContent = '正在加载...';
        // 这里触发 API 请求或创建元素并插入
        loader.textContent = '加载完成!';
        observer.unobserve(loader);
      }
    });
  });

  observer.observe(loader);
});