当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptIntersectionObserver是什么？如何实现懒加载？

JavaScriptIntersectionObserver是什么？如何实现懒加载？

2026-01-18 10:11:35 0浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JavaScript Intersection Observer 是什么？如何实现懒加载？》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

Intersection Observer 是实现懒加载最推荐的高性能 API，通过异步监听元素与视口交叉状态，避免阻塞主线程；其核心是创建观察器实例并调用 observe() 注册目标元素，在回调中根据 isIntersecting 和 intersectionRatio 控制资源加载。

什么是JavaScript的Intersection Observer_它如何实现懒加载呢

Intersection Observer 是 JavaScript 提供的一个 API，用来异步监听目标元素与视口（或指定祖先容器）的交叉状态变化——简单说，就是“这个元素有没有进入/离开屏幕可视区域”。它不依赖滚动事件，性能好、写法简洁，是实现懒加载（Lazy Loading）最推荐的方式。

Intersection Observer 的核心机制

它通过创建一个观察器实例，传入回调函数和配置项，然后用 observe() 方法注册要监听的 DOM 元素。当目标元素与根容器（默认是视口）的交集比例发生变化（比如从 0% 进入到 10%），浏览器会在空闲时段触发回调，传入 IntersectionObserverEntry 列表，里面包含每个元素当前的可见比例（intersectionRatio）、是否在视口中（isIntersecting）等信息。

关键优势在于：不阻塞主线程、无需手动节流、自动处理滚动/缩放/DOM 变化等场景。

用 Intersection Observer 实现图片懒加载

懒加载的核心逻辑是：图片初始只设 data-src，等它快进入视口时，再把真实地址赋给 src 并触发加载。用 Intersection Observer 实现非常直接：

给所有待懒加载的加上 loading="lazy"（现代浏览器原生支持，但兼容性有限；Intersection Observer 是更可控的兜底方案）
初始化 Observer，设置 threshold: [0, 0.1] 表示只要 0% 或 10% 可见就触发
在回调中检查 entry.isIntersecting，为 true 就取 data-src 赋值给 src，然后调用 unobserve(entry.target) 停止监听（避免重复加载）
可选：加载失败时加 class 标记，或显示占位图

实际代码片段（精简版）

HTML 示例：

<img data-src="photo.jpg" alt="描述" class="lazy">

JS 示例：

const lazyImages = document.querySelectorAll('img.lazy');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img); // 加载完就停止监听
    }
  });
}, { threshold: 0.1 });

lazyImages.forEach(img => observer.observe(img));

注意几个实用细节

rootMargin 可设为 "100px"，让元素提前 100px 开始加载（避免滚动过快时白屏）
如果页面有多个懒加载类型（图片、组件、广告），建议按需创建多个 Observer，或用 entry.target.dataset.type 分类处理
服务端渲染（SSR）项目中，首次加载仍需考虑无 JS 降级方案，比如用