javascript如何实现图片懒加载_如何延迟加载图片资源

狼影 2025-12-19 00:00:00 次阅读

图片懒加载的核心是延迟加载视口内图片以提升性能，推荐使用Intersection Observer API实现，兼容方案可用scroll+getBoundingClientRect，现代浏览器可直接用loading="lazy"属性。

图片懒加载的核心是：让图片只在即将进入视口时才开始加载，避免页面初始化时大量请求图片资源，提升首屏速度和用户体验。关键在于监听滚动、判断位置、动态设置 src 或使用 loading="lazy" 原生支持。

用 Intersection Observer API 实现现代懒加载（推荐）

这是目前最高效、性能最好、代码最简洁的方式，无需手动计算滚动和位置，浏览器原生优化了监听开销。

给需要懒加载的标签添加 data-src 属性，存放真实图片地址，src 可留空或设为占位图
创建 IntersectionObserver 实例，配置 rootMargin（如 "100px"）实现“提前加载”，避免滚动过快时出现空白
观察所有带 data-src 的图片，当其进入视口时，把 data-src 赋值给 src，并停止观察该元素

示例代码：

const lazyImages = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      imageObserver.unobserve(img); // 加载完即停止监听
    }
  });
}, { rootMargin: '100px' });

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