利用Intersection Observer API实现懒加载_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

利用Intersection Observer API实现懒加载

2025-11-03

浏览次数：次

返回列表

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

利用intersection observer api实现懒加载

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

什么是Intersection Observer API

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

核心概念包括：

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

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

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

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319 查看详情 OneStory

@@##@@

J*aScript中创建观察器并绑定目标元素：

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);
});