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

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

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

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 降级方案，比如用
• 配合 decode() 方法可进一步优化：赋值 src 后调用 img.decode().then(() => img.classList.add('loaded'))，确保解码完成再显示

基本上就这些。Intersection Observer 让懒加载从“手写 scroll + throttle”升级为声明式、低耦合、高性能的实现方式，现代前端项目基本都该用它。

本篇关于《JavaScriptIntersectionObserver是什么？如何实现懒加载？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！