用IntersectionObserver实现图片懒加载，页面秒开不卡顿

打开网页时，最怕啥？一屏几十张图，还没加载完，手机就开始发烫。尤其在流量紧张的时候，用户哪有耐心等？这时候，懒加载就派上用场了。以前大家靠监听scroll事件判断元素是否进入视口，写法繁琐还容易卡顿。现在有了 IntersectionObserver，轻松搞定懒加载。

什么是IntersectionObserver？

简单说，它是个浏览器原生的观察器，能自动告诉你某个元素有没有出现在可视区域内。不用再手动算 scrollTop、offsetTop 那一套，代码更干净，性能也更好。

怎么用它做图片懒加载？

假设你有一堆图片，真实地址放在 data-src 里，src 先给个占位图：

<img class="lazy" data-src="/images/photo1.jpg" src="/images/placeholder.gif" alt="">
<img class="lazy" data-src="/images/photo2.jpg" src="/images/placeholder.gif" alt="">
<img class="lazy" data-src="/images/photo3.jpg" src="/images/placeholder.gif" alt="">

接下来，用 JavaScript 创建一个观察器实例，监控这些带 lazy 类的图片：

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); // 加载完就不再观察
    }
  });
});

// 开始观察所有 .lazy 图片
document.querySelectorAll('.lazy').forEach(img => {
  observer.observe(img);
});

就这么几行代码，图片滚到眼前才开始加载，省流量又提速。特别适合长文章、商品列表这类内容多的页面。

还能干点别的？

当然。比如你想做个“滚动到某区域才播放动画”的效果，也可以用它来触发。甚至广告位的曝光统计，也能靠它精准记录——只有真正被看到才算一次曝光，避免刷数据。

现在很多框架（React、Vue）也有基于它的封装组件，但理解原生写法，才能在项目里灵活应对各种场景。下次遇到加载慢的问题，不妨试试这个轻量又高效的方案。