JavaScript实现：当Div进入视口时为其添加图片

嘿，我来帮你搞定这个需求！你遇到的场景正好适合用Intersection Observer API，这比监听scroll事件靠谱太多了——它是浏览器原生支持的异步API，性能更好，还能精准判断元素是否进入视口，而且天然支持只触发一次的要求。

实现步骤详解： #

1. 先准备你的HTML结构

给需要加载图片的div加上统一的类名，并用data-*属性存储图片地址，方便后续读取：

<div class="image-placeholder" data-img="https://example.com/photo1.jpg"></div>
<div class="image-placeholder" data-img="https://example.com/photo2.jpg"></div>
<div class="image-placeholder" data-img="https://example.com/photo3.jpg"></div>

2. 编写核心JavaScript代码

用Intersection Observer来监听元素是否进入视口，一旦触发就加载图片，然后停止观察该元素：

// 配置观察选项：root设为null表示监听浏览器视口，threshold=0.1表示元素10%进入视口就触发
const observerConfig = {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
};

// 定义触发回调函数
const handleIntersection = (entries, observer) => {
  entries.forEach(entry => {
    // 只处理进入视口的元素
    if (entry.isIntersecting) {
      const targetDiv = entry.target;
      const imgUrl = targetDiv.dataset.img;

      // 创建图片元素并添加到div中
      const imgElement = document.createElement('img');
      imgElement.src = imgUrl;
      imgElement.alt = 'Dynamic loaded image';
      targetDiv.appendChild(imgElement);

      // 停止观察这个div，确保只加载一次
      observer.unobserve(targetDiv);
    }
  });
};

// 创建Observer实例
const imgObserver = new IntersectionObserver(handleIntersection, observerConfig);

// 遍历所有目标div，加入观察队列
document.querySelectorAll('.image-placeholder').forEach(div => {
  imgObserver.observe(div);
});

为什么这个方案比scroll监听更好？ #

• 性能更优：scroll事件会频繁触发，每次都要计算元素位置，容易造成卡顿；而Intersection Observer是异步触发，不会阻塞主线程。
• 精准控制：可以通过threshold参数设置元素进入视口的比例（比如0表示刚碰到视口就触发，1表示完全进入才触发），满足不同场景需求。
• 自动去重：调用unobserve()方法后，该元素就不会再被监听，完美实现“每个div仅执行一次”的要求。

额外小提示 #

如果你的项目需要兼容IE这类旧浏览器，可以引入Intersection Observer的polyfill，但现在绝大多数现代浏览器（Chrome、Firefox、Edge、Safari 12.1+）都已经原生支持这个API了，一般不需要额外处理。

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