IntersectionObserver懒加载实现教程

文章不知道大家是否熟悉？今天我将给大家介绍《Intersection Observer实现懒加载教程》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

Intersection Observer API 能高效实现图片懒加载，通过监听元素是否进入视口，避免频繁触发重绘。首先选中带有 data-src 属性的图片，创建 IntersectionObserver 实例并在回调中判断元素可见性，将 data-src 赋值给 src 以加载图片，随后停止监听。可设置 rootMargin 提前加载、用 CSS 固定占位防止抖动，并添加淡入动画优化体验，兼顾老浏览器时可引入 polyfill。该方法比传统 scroll 事件更流畅高效。

懒加载图片能提升页面性能，Intersection Observer API 是实现它的现代方式。相比传统的 scroll 事件监听，它更高效、更流畅，不会频繁触发重绘或重排。

什么是 Intersection Observer API

Intersection Observer 允许你监听一个元素是否进入视口。你不需要手动计算位置或绑定 scroll 事件，浏览器会在元素接近可视区域时通知你。

核心思路是：给所有需要懒加载的图片设置一个占位属性（如 data-src），初始不加载真实图片。当元素进入视口时，再把 data-src 的值赋给 src，触发加载。

基本实现步骤

以下是使用 Intersection Observer 实现图片懒加载的关键步骤：

• 选中所有带有 data-src 属性的图片元素
• 创建 IntersectionObserver 实例，配置回调函数
• 在回调中判断元素是否进入视口，如果是，替换 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);
});

优化与注意事项

为了让懒加载体验更好，可以加入一些优化手段：

• 设置 rootMargin 提前加载图片，比如 { rootMargin: '50px' }，让用户还没滚动到时图片就已经开始加载
• 给图片设置固定宽高或 CSS 容器占位，避免加载时页面跳动
• 加载完成后可以添加淡入动画，提升视觉体验
• 注意老浏览器兼容性，可引入 polyfill 支持 IE

好了，本文到此结束，带大家了解了《IntersectionObserver懒加载实现教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！