如何利用JavaScript的Intersection Observer API实现懒加载？

Intersection Observer API能高效实现懒加载。它异步监听元素与视口的交叉状态，相比scroll事件更流畅，不阻塞主线程。通过观察img元素，当进入视口时将data-src赋值给src，并停止监听，可提升性能。配置rootMargin可提前加载，threshold控制触发比例，需注意兼容性及及时解绑观察器。

懒加载图片或内容能提升页面性能，Intersection Observer API 提供了一种高效监听元素是否进入视口的方式。相比传统的 scroll 事件加 getBoundingClientRect 计算，它更流畅、性能更好。

什么是 Intersection Observer API

Intersection Observer 是浏览器原生提供的 API，用于异步检测目标元素与视口的交叉状态。当某个元素进入或离开可视区域时，会触发回调函数，适合用来实现懒加载。

它的优势在于不占用主线程，不会频繁触发重排或重绘，比手动监听 scroll 事件更加高效。

基本用法：实现图片懒加载

将需要懒加载的图片的 src 放在 data-src 属性中，初始使用占位图或空白。当图片进入视口时，再将 data-src 赋值给 src。

立即学习“Java免费学习笔记（深入）”；

示例代码：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

// HTML 示例
<img class="lazy" src="placeholder.jpg" alt="图片">

// JavaScript 实现
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img); // 加载后停止监听
    }
  });
});

// 开始观察所有带 .lazy 类的图片
document.querySelectorAll('.lazy').forEach(img => {
  observer.observe(img);
});

优化配置项

创建 IntersectionObserver 时可以传入第二个参数配置对象，控制触发时机。

• root：指定根容器，默认是浏览器视口
• rootMargin：扩展或收缩触发区域，如 '50px' 表示提前 50 像素加载
• threshold：交叉比例，0.1 表示 10% 可见时触发，0 表示一进入就触发

例如，想让图片在距离视口还有 100px 时就开始加载：

const options = {
  rootMargin: '100px',
  threshold: 0.01
};

const observer = new IntersectionObserver(callback, options);

注意事项与兼容性

Intersection Observer 在现代浏览器中支持良好，但旧版 IE 不支持。如果需要兼容，可引入 polyfill：

https://www.php.cn/link/737344cccb5f89b59a89a5f20cc3f303

另外，记得在图片加载完成后调用 unobserve，避免重复处理和内存浪费。对于频繁出现/移除的元素，也要注意及时解绑观察器。

基本上就这些，简单又高效。

以上就是如何利用JavaScript的Intersection Observer API实现懒加载？的详细内容，更多请关注php中文网其它相关文章！