利用Intersection Observer API实现懒加载

Intersection Observer API通过异步监听元素进入视口实现高效懒加载，相比scroll事件更优；核心概念包括target、root、threshold和callback；基本用法是将真实图片地址存于data-src，观察带有.lazy类的图片，当交叉比例达阈值（如0.01）且进入视口时，替换src并停止观察；建议设置rootMargin提前加载、加载后调用unobserve释放资源、配合LQIP提升体验，并注意IE不支持需降级处理；合理设置阈值避免错过触发，整体简洁高效，推荐优先使用。

懒加载图片是提升网页性能的常用手段，而Intersection Observer API提供了一种高效、流畅的方式来实现这一功能。相比传统的监听scroll事件，它不会频繁触发重绘或回流，对性能更友好。

什么是Intersection Observer API

Intersection Observer是浏览器提供的API，用于异步检测一个元素是否进入视口（即用户可见区域）。它不直接监听滚动，而是由浏览器在合适时机通知你目标元素与根元素的交叉状态。

核心概念包括：

• target：要观察的元素，比如待加载的图片
• root：作为参照的容器，默认为浏览器视口
• threshold：触发回调的交叉比例，如0.1表示进入视口10%时触发
• callback：当交叉状态变化时执行的函数

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

将图片的真实地址放在data-src属性中，初始使用占位图或透明图：

度加剪辑

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

63

查看详情

<img class="lazy"  src="placeholder.png" alt="示例图">

JavaScript中创建观察器并绑定目标元素：

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); // 加载后停止观察
    }
  });
}, {
  rootMargin: '50px', // 提前50px开始加载
  threshold: 0.01
});

// 观察所有懒加载图片
document.querySelectorAll('.lazy').forEach(img => {
  observer.observe(img);
});

优化建议与注意事项

实际应用中可以加入一些改进点：

• 设置rootMargin提前加载图片，避免用户看到空白
• 加载完成后调用unobserve()释放资源，防止重复处理
• 可配合低质量占位图（LQIP）提升用户体验
• 注意兼容性：IE不支持，需降级方案或使用polyfill

基本上就这些。Intersection Observer让懒加载变得简洁又高效，推荐在项目中优先使用这种方式替代手动计算位置。不复杂但容易忽略细节，比如阈值设为0可能错过触发，稍微设小一点更稳妥。

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