如何用HTML插入懒加载图片？Intersection Observer API实现方法是什么

图片懒加载指的是页面初始加载时仅加载可视区域内的图片，当用户滚动页面使图片进入可视范围时再加载对应资源，这种方式能大幅减少页面初始请求的资源数量，提升加载速度。传统的懒加载多依赖scroll事件监听，存在性能损耗高、适配复杂的问题，而Intersection Observer API提供了更高效的原生监听方案。

HTML插入图片的基础方式

在HTML中插入图片通常使用<img>标签，基础语法如下：

<img src="图片地址" alt="图片描述">

要实现懒加载，我们不能直接在src属性中填写真实图片地址，而是需要用一个自定义属性存储真实地址，初始时src可以设置为占位图或者空值，避免初始加载真实图片。

Intersection Observer API核心概念

Intersection Observer API可以异步监听目标元素与祖先元素或视口的交叉状态，当交叉比例达到设定阈值时会触发回调函数，不需要频繁触发scroll事件，性能表现更优。

创建观察者的基础语法如下：

// 创建观察者实例
const observer = new IntersectionObserver(callback, options);
// 观察目标元素
observer.observe(targetElement);

其中callback是交叉状态变化时的回调函数，options是配置对象，可以设置视口边界、交叉阈值等参数。

完整实现步骤

1. HTML结构编写

我们首先编写包含懒加载图片的HTML结构，用data-src存储真实图片地址，初始src设置为占位图：

<div class="img-container">
  <img class="lazy-img" data-src="https://ipipp.com/demo1.jpg" src="https://ipipp.com/placeholder.jpg" alt="示例图片1">
</div>
<div class="img-container">
  <img class="lazy-img" data-src="https://ipipp.com/demo2.jpg" src="https://ipipp.com/placeholder.jpg" alt="示例图片2">
</div>
<div class="img-container">
  <img class="lazy-img" data-src="https://ipipp.com/demo3.jpg" src="https://ipipp.com/placeholder.jpg" alt="示例图片3">
</div>

2. JavaScript实现懒加载逻辑

接下来编写JS代码，创建Intersection Observer实例，监听所有懒加载图片，当图片进入视口时替换src为真实地址并停止观察：

// 获取所有需要懒加载的图片元素
const lazyImgs = document.querySelectorAll('.lazy-img');

// 定义交叉状态变化的回调函数
const handleIntersection = (entries) => {
  entries.forEach(entry => {
    // 判断元素是否进入视口
    if (entry.isIntersecting) {
      const img = entry.target;
      // 获取data-src存储的真实图片地址
      const realSrc = img.getAttribute('data-src');
      if (realSrc) {
        // 替换src为真实地址，触发图片加载
        img.src = realSrc;
        // 加载完成后移除data-src属性，避免重复处理
        img.removeAttribute('data-src');
      }
      // 图片已经加载，停止观察该元素
      observer.unobserve(img);
    }
  });
};

// 创建Intersection Observer实例，配置交叉阈值为0.1，即元素10%进入视口时触发
const observer = new IntersectionObserver(handleIntersection, {
  threshold: 0.1
});

// 遍历所有懒加载图片，开始观察
lazyImgs.forEach(img => {
  observer.observe(img);
});

3. 样式适配（可选）

为了让占位图和真实图片的显示效果更统一，可以添加基础CSS样式，固定图片容器的尺寸：

.img-container {
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
}

.lazy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

注意事项

• 如果页面中存在动态新增的懒加载图片，需要在新增元素后重新调用observer.observe()方法观察新元素。
• 对于不支持Intersection Observer API的旧浏览器，可以添加polyfill兼容，或者 fallback 到传统的scroll事件监听方案。
• 占位图的尺寸最好和真实图片的显示尺寸一致，避免图片加载完成后页面布局发生偏移。
• 真实图片地址加载失败时，可以添加onerror事件处理，替换为错误占位图，提升用户体验。

实现效果验证

完成上述代码后，打开页面时只有占位图被加载，滚动页面使懒加载图片进入可视区域时，开发者工具的网络面板中会出现对应真实图片的请求，说明懒加载功能生效。这种方式相比传统scroll监听方案，减少了大量的计算逻辑，页面滚动时也不会频繁触发回调，性能表现更出色。

HTMLIntersection_Observer_API懒加载图片前端性能优化修改时间：2026-06-24 20:18:37