IntersectionObserver的用法

IntersectionObserver

IntersectionObserver 是 JavaScript 中用于监听元素与其祖先元素或视口(viewport)交叉状态的 API,常用于实现懒加载无限滚动广告曝光统计等功能。以下是其核心概念和用法:

核心概念

  • 交叉观察 :检测目标元素与根元素(默认为视口)的交集变化。
  • 阈值(Threshold) :交集比例达到多少时触发回调(如 0.5 表示元素显示一半时触发)。
  • 异步触发:由浏览器优化后异步执行,不会阻塞主线程。
js 复制代码
// 创建观察者实例
const observer = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 元素进入视口时的操作
        console.log(`${entry.target.id} 进入视口`);
        observer.unobserve(entry.target); // 停止观察
      }
    });
  },
  {
    root: null, // 默认为视口
    rootMargin: '0px', // 根元素的边距(如 `'10px 0px'`),可扩大或缩小监听范围。
    threshold: 0.1 // 元素显示 10% 时触发回调
  }
);

// 观察目标元素
const target = document.getElementById('target');
observer.observe(target);

回调参数(entries 每个 entry 对象包含以下属性:

  • isIntersecting:布尔值,表示元素是否正在交叉。
  • intersectionRatio:交集比例(0~1)。
  • target:目标元素。
  • boundingClientRect:目标元素的位置信息。
  • intersectionRect:交集区域的位置信息。

常见应用场景

1. 图片懒加载

js 复制代码
const images = document.querySelectorAll('img[data-src]');

const imgObserver = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src; // 加载真实图片
        img.classList.add('loaded');
        observer.unobserve(img);
      }
    });
  },
  { threshold: 0.1 }
);

images.forEach(img => imgObserver.observe(img));

2. 无限滚动

js 复制代码
const loadMoreObserver = new IntersectionObserver(
  (entries) => {
    if (entries[0].isIntersecting) {
      loadMoreData(); // 加载更多数据
    }
  },
  { rootMargin: '100px' } // 提前 100px 触发加载
);

loadMoreObserver.observe(document.getElementById('load-more-trigger'));

3. 元素曝光统计

js 复制代码
const adObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
        trackAdExposure(entry.target.id); // 统计广告曝光
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.5 } // 至少显示 50% 时才统计
);

优点

  • 性能优化 :由浏览器原生实现,避免频繁的 scrollresize 事件监听。
  • 简化开发:无需手动计算元素位置,逻辑更清晰。
  • 异步执行:不阻塞主线程,提升页面响应速度。

缺点

  • 兼容性 :IE 不支持,需使用 polyfill(如 intersection-observer)。
  • 精度限制:无法精确控制像素级别的交叉检测。
相关推荐
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu1 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6662 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey2 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆2 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W2 小时前
uniapp全局状态管理实现方案
前端
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL3 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全