如何基于Intersection Observer实现H2标签与懒加载图片同步加载？

步骤1：调整HTML结构 #

首先要把注释中的H2改为实际DOM元素，并设置初始隐藏状态，同时让图片和对应H2建立清晰的关联（比如放在同一父容器）：

<div>
  <img src="1.jpg">
  <h2>title 1</h2>

  <!-- 将懒加载图片与对应H2放在同一容器，方便关联查找 -->
  <div class="lazy-media">
    <img data-src="2.jpg">
    <h2 hidden>title 2</h2>
  </div>

  <div class="lazy-media">
    <img data-src="3.jpg">
    <h2 hidden>title 3</h2>
  </div>
</div>

这里用原生hidden属性让H2初始隐藏，也可以自定义CSS类（比如.hidden { display: none; }），根据样式需求选择即可。

步骤2：修改JavaScript代码 #

在现有图片懒加载逻辑基础上，扩展Intersection Observer的回调，当图片进入视口时，同时显示对应的H2标签，还可以优化触发时机提升体验：

const images = document.querySelectorAll('img[data-src]');

// 可选配置：提前触发加载，避免滚动时出现延迟
const observerConfig = {
  rootMargin: '50px 0', // 元素距离视口还有50px时就触发加载
  threshold: 0.1 // 元素10%进入视口时触发回调
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      // 完成图片懒加载
      image.src = image.dataset.src;
      
      // 找到同一容器下的对应H2并显示
      const title = image.parentElement.querySelector('h2');
      if (title) {
        title.hidden = false;
        // 如果用CSS类隐藏，替换为 title.classList.remove('hidden')
      }

      // 停止观察已处理的图片，减少性能消耗
      observer.unobserve(image);
    }
  });
}, observerConfig);

// 批量监听所有懒加载图片
images.forEach(image => observer.observe(image));

关键细节说明 #

• 灵活关联元素：如果页面结构复杂，也可以用自定义属性绑定图片和H2，比如给图片加data-title-id="title-2"，对应H2设置id="title-2"，然后通过document.getElementById(image.dataset.titleId)找到目标H2，适配更多场景。
• 性能优化：处理完成后调用unobserve，能减少Observer的监听数量，降低浏览器性能开销。
• 提前触发逻辑：rootMargin参数让加载动作提前触发，避免用户滚动时看到明显的加载延迟，提升浏览流畅度。

内容的提问来源于stack exchange，提问作者user718229