html5使用intersection observer实现懒加载 html5使用交叉观察器的技巧-html教程-PHP中文网

html5使用intersection observer实现懒加载 html5使用交叉观察器的技巧

雪夜

发布： 2025-10-23 21:06:01

原创

965人浏览过

使用 Intersection Observer API 实现图片懒加载，通过监听元素进入视口并动态加载真实图片，减少资源请求、提升性能；结合 rootMargin 提前加载、多阶段加载和错误处理可进一步优化体验，兼容性不足时可降级至 scroll 事件或引入 polyfill。

html5使用intersection observer实现懒加载 html5使用交叉观察器的技巧

在现代网页开发中，提升性能和用户体验是关键目标之一。图片懒加载是一种常见优化手段，而使用 HTML5 的 Intersection Observer API 实现懒加载，既能减少资源请求，又能避免页面卡顿，是一种高效且推荐的做法。

什么是 Intersection Observer？

Intersection Observer 是浏览器提供的 API，用于异步监听某个元素是否进入或离开视口（可视区域）。相比传统的 scroll 事件加 getBoundingClientRect 计算，它性能更好，不会频繁触发重排或重绘。

基本用法：创建一个观察器实例，指定回调函数，然后观察目标元素。

实现图片懒加载的基本步骤

通过给 img 标签设置占位符，并利用 data-src 存储真实图片地址，在元素即将进入视口时再加载真实图片。

立即学习“前端免费学习笔记（深入）”；

为图片添加 loading="lazy" 替代方案（兼容性补充）
使用 data-src 属性保存真实图片路径
创建 IntersectionObserver 实例，监听图片元素
当元素进入视口时，将 data-src 赋值给 src，并停止观察

示例代码：

<img class="lazy"  alt="示例图片">

<script>
const lazyImages = document.querySelectorAll('.lazy');

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      if (img.dataset.src) {
        img.src = img.dataset.src;
        img.classList.remove('lazy');
        observer.unobserve(img);
      }
    }
  });
});

lazyImages.forEach(img => {
  imageObserver.observe(img);
});
</script>

登录后复制

提升体验的实用技巧

为了更平滑地加载图片，可以结合一些增强策略：

魔搭MCP广场

聚合优质MCP资源，拓展模型智能边界

查看详情

提前加载阈值：设置 rootMargin 扩展视口范围，比如 '50px'，让用户还没滚动到时就开始加载
多阶段加载：先加载低质量缩略图，再用 Intersection Observer 加载高清图
防抖与复用：一个 Observer 实例可观察多个元素，避免重复创建
错误处理：图片加载失败时显示默认图或重试机制

例如设置提前加载：

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  }
}, {
  rootMargin: '50px 0px'
});

登录后复制