IntersectionObserver实现懒加载与无限滚动技巧

Intersection Observer API 是现代网页性能优化的利器，它通过浏览器原生机制高效监听元素与视口的交叉状态，彻底取代了易导致卡顿的传统 scroll 事件监听，让懒加载图片和无限滚动既流畅又轻量：图片仅在即将进入视野时才加载真实资源，大幅减少首屏请求；信息流则借助“哨兵元素”智能触发下一页数据获取，按需渲染、避免冗余计算。配合阈值预加载、根容器适配、及时卸载监听及兼容性兜底等最佳实践，开发者能轻松构建高性能、高响应的用户体验——把“何时加载”的判断权交给浏览器，释放主线程，让页面丝滑如初。

Intersection Observer API 是现代浏览器提供的一种高效监听元素与视口交叉状态的机制，相比传统的 scroll 事件监听，它能在不阻塞主线程的前提下实现懒加载图片和无限滚动，显著提升页面性能。

懒加载图片：减少初始资源请求

页面中包含大量图片时，一次性加载所有资源会拖慢首屏渲染。使用 Intersection Observer 可以只在图片即将进入视口时才加载其真实内容。

基本思路是：HTML 中先用 data-src 存储真实图片地址，src 指向占位图或空白。当元素进入可视区域，再将 data-src 赋值给 src。

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

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img); // 加载后停止监听
    }
  });
});

images.forEach(img => imageObserver.observe(img));

无限滚动：按需加载更多内容

无限滚动常见于信息流、商品列表等场景。与其监听 scroll 事件频繁计算位置，不如用一个“哨兵元素”作为触发器，通过 Intersection Observer 监听它是否进入视口来加载下一页数据。

关键点在于：在列表末尾添加一个不可见的占位元素，一旦它出现在视口中，就请求新数据并追加到列表中，同时更新或重新观察新的哨兵元素。

• 创建一个用于监听的 DOM 元素（如 div.sentinel）并插入列表底部
• 初始化 Intersection Observer，当 sentinel 被交叉时发起异步请求
• 获取新数据后渲染并替换旧的 sentinel，继续观察新位置
• 可设置加载状态防止重复请求

const sentinel = document.querySelector('#sentinel');
const container = document.querySelector('#list-container');

const loadMore = () => {
  // 模拟异步请求
  fetch('/api/items?page=2')
    .then(res => res.json())
    .then(items => {
      items.forEach(item => {
        const el = document.createElement('div');
        el.textContent = item.title;
        container.appendChild(el);
      });
    });
};

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadMore();
  }
});

observer.observe(sentinel);

优化建议与注意事项

虽然 Intersection Observer 性能优秀，但仍需注意合理使用以避免潜在问题。

• 阈值控制：可通过配置 threshold（如 0.1）让回调在元素可见 10% 时触发，提前加载更流畅
• 根容器设置：若滚动容器不是 viewport，需设置 root 属性指向父容器
• 卸载监听：元素加载完成后调用 unobserve() 避免内存泄漏
• 兼容性处理：老版本浏览器可用 polyfill 或回退到 scroll 监听方案

今天关于《IntersectionObserver实现懒加载与无限滚动技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！