用原生 JS 写一个简单的图片懒加载

图片懒加载现在大多交给原生 loading="lazy"，但有些场景（比如滚动容器内的图片、或需要更细控制的占位）还是得自己写。用 IntersectionObserver 最干净。

const imgs = document.querySelectorAll("img[data-src]");
const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) {
      e.target.src = e.target.dataset.src;
      io.unobserve(e.target);
    }
  });
}, { rootMargin: "200px" });
imgs.forEach((img) => io.observe(img));

几个注意点

rootMargin 提前 200px 加载，避免用户滚到时才"啪"地闪一下。图片占位用同比例的纯色块，防止布局抖动（CLS）。加载完再去掉占位背景。低版本浏览器没有 IntersectionObserver，给个直接加载的降级就行。