← 返回首页

怎么实现图片懒加载

发布时间: 2026-06-18

出自: 公司面试

核心原理

懒加载的本质是：图片初始不加载真实资源，当图片进入可视区域时，再触发加载。

具体做法：<img> 的 src 先指向一张占位图（或为空），真实地址存在 data-src 中，等图片进入视口时，把 data-src 的值赋给 src。

三种实现方案（由优到劣）

方案一：原生 `loading="lazy"`（首选）

<img src="image.jpg" loading="lazy" alt="描述" />

一句话：现代浏览器原生支持，零代码成本，面试时先提这个体现你对新特性的了解。

方案二：Intersection Observer API（主流方案）

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img); // 加载后停止观察
    }
  });
}, { rootMargin: '50px' }); // 提前预加载

document.querySelectorAll('.lazy').forEach(img => observer.observe(img));

关键点：异步监听，不触发重排/重绘，性能好。

方案三：scroll 事件 + `getBoundingClientRect`（降级方案）

监听 scroll 事件，通过 getBoundingClientRect() 判断元素是否进入视口。注意要节流，避免频繁触发导致卡顿。

面试加分点

预加载：通过 rootMargin 提前加载，避免用户看到空白。
首屏图片不懒加载：首屏内容应优先加载，懒加载只用于首屏以下。
防抖动/占位图：避免图片加载时页面跳动（CLS 问题）。
兼容性处理：优先用原生 loading="lazy"，不支持则降级到 Intersection Observer，再不支持则用 scroll 方案。