前端图片懒加载技术实现详解

A-Kamen

于 2025-03-25 02:00:31 发布

阅读量884

点赞数 30

文章标签：前端

本文链接：https://blog.youkuaiyun.com/A_Kamen/article/details/146491029

版权

前端图片懒加载技术实现详解

在当今网页中，图片通常占据了大量的资源，如果一次性加载所有图片，会严重影响页面加载速度和用户体验。为了解决这一问题，图片懒加载（Lazy Loading）技术应运而生。本文将详细介绍图片懒加载的原理、常见实现方案、代码示例以及最佳实践，帮助你构建高性能的网页应用。

1. 什么是图片懒加载？

图片懒加载指的是在页面加载时，仅加载当前可视区域内的图片，而将其他图片的加载延迟到用户滚动到相应位置再触发。这样可以有效减少初始加载时间、节省带宽并提升用户体验。

2. 为什么需要图片懒加载？

提升页面性能：减少初始加载的 HTTP 请求和数据传输，使页面更快呈现。
节省资源：对于移动端用户和网络状况较差的环境尤为重要，避免加载用户当前不可见的图片浪费流量。
改善用户体验：页面内容优先加载，用户可以更快地看到核心内容，提升整体体验。

3. 实现方案

前端图片懒加载主要有以下几种实现方式：

3.1 HTML 原生支持

现代浏览器已经开始支持原生的懒加载属性。只需在 <img> 标签上添加 loading="lazy" 属性，即可自动实现懒加载功能：

<img src="example.jpg" alt="示例图片" loading="lazy">

优点：

实现简单，不需要额外的 JavaScript 代码。
浏览器内部优化，性能较好。

缺点：

兼容性问题：部分旧版本浏览器（如 IE）不支持。

3.2 使用 IntersectionObserver API

对于需要兼容更多浏览器或更灵活控制加载行为的场景，可以使用 IntersectionObserver API。它能够监听元素与视窗（viewport）交叉的状态，从而触发图片加载。

示例代码

<!-- HTML 部分 -->
<img data-src="example.jpg" alt="示例图片" class="lazy">

// JavaScript 部分
document.addEventListener('DOMContentLoaded', function () {
  const lazyImages = document.querySelectorAll('img.lazy');

  if ('IntersectionObserver' in window) {
    const imageObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          // 替换 data-src 为 src 开始加载图片
          img.src = img.dataset.src;
          // 加载完毕后移除懒加载样式和 observer
          img.classList.remove('lazy');
          observer.unobserve(img);
        }
      });
    });

    lazyImages.forEach(image => {
      imageObserver.observe(image);
    });
  } else {
    // 兼容不支持 IntersectionObserver 的浏览器，直接加载所有图片
    lazyImages.forEach(image => {
      image.src = image.dataset.src;
      image.classList.remove('lazy');
    });
  }
});

解析：

通过 data-src 保存真实图片 URL，初始时不设置 src。
使用 IntersectionObserver 监听图片进入视口的情况，一旦图片可见，则将 data-src 赋值给 src，触发加载。
对不支持 IntersectionObserver 的浏览器，则直接加载图片作为降级方案。

3.3 第三方库方案

市面上也有许多优秀的懒加载库，如 lazysizes、Vanilla Lazyload 等。这些库封装了懒加载逻辑，提供了丰富的配置选项、动画效果以及兼容性处理。

使用 lazysizes 示例

<!-- 引入 lazysizes 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>

<!-- 使用 class="lazyload" 实现懒加载 -->
<img data-src="example.jpg" class="lazyload" alt="示例图片">