【前端】【面试】如何实现图片渐进式加载？有几种方法

前端图片渐进式加载

一、技术原理解析

渐进式加载是通过分阶段、按需加载图片，以提升用户体验和页面性能的优化技术。主要包括以下实现方式：

懒加载 ：基于IntersectionObserver API，当图片进入浏览器视口时才发起加载请求，减少初始页面加载量。现代浏览器支持loading="lazy"原生属性，可自动实现延迟加载。
低质量占位图：使用模糊占位图（LQIP）或灰色方块占位，在真实图片加载前快速呈现，待图片即将可见时再加载高清版本。
骨架屏：在加载过程中展示页面布局的灰色框架，让用户感知页面结构和加载状态。
渐进式图像格式：如渐进式JPEG，先以低质量方式加载整体轮廓，再逐层叠加细节，让用户更快看到图片概貌。

其核心原理是先展示轻量化占位内容，缩短用户感知加载时间，再异步加载高清图片，提升整体体验。

二、实现方式与代码示例

1. 原生 HTML/CSS/JS 实现

现代浏览器支持原生懒加载：

html 复制代码

<img src="real.jpg" loading="lazy" alt="..." width="..." height="...">

如需更灵活控制，可结合IntersectionObserver：

html 复制代码

<img class="lazyload" data-src="high-res.jpg" alt="示例图片" width="600" height="400">

js 复制代码

const lazyImages = document.querySelectorAll('img.lazyload');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazyload');
      observer.unobserve(img);
    }
  });
});
lazyImages.forEach(img => observer.observe(img));

2. 进阶：响应式图片与懒加载结合

使用<picture>标签实现格式兼容与懒加载：

html 复制代码

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" loading="lazy" alt="示例图片">
</picture>

浏览器会优先选择AVIF或WebP格式，不支持时回退到JPEG。

3. 渐进式图像格式处理

将JPEG保存为渐进式模式，或使用WebP/AVIF等现代格式，结合TinyJPG等工具生成多尺寸图及预览版本。

三、应用场景与优化策略

适用于图片密集型场景，如长列表、瀑布流、电商页面等。优化建议：

CDN加速：分发图片资源，提升加载速度。
图片压缩与尺寸适配：根据设备类型提供对应尺寸和格式的图片。
采用现代格式：优先使用WebP/AVIF，降低文件大小。
占位图策略：使用色块或低质量图作为占位，增强过渡体验。

四、不同方法的优缺点对比

方法	优点	缺点
Base64占位图	加载迅速，过渡平滑	需多版本占位图，增加数据量
懒加载	减少请求，兼容性好	依赖现代浏览器，滚动过快可能留白
骨架屏	展示页面结构，缓解等待焦虑	实现复杂，增加渲染成本
渐进式JPEG	快速呈现轮廓，渐进加载细节	仅支持JPEG，缺乏新特性支持

五、主流框架中的实现方式

React

使用react-lazyload库：

jsx 复制代码

import LazyLoad from 'react-lazyload';

function Gallery() {
  return (
    <LazyLoad height={200} once>
      <img src="large-image.jpg" alt="示例" />
    </LazyLoad>
  );
}

或结合react-intersection-observer自定义懒加载逻辑。

Vue

使用vue-lazyload插件：

js 复制代码

// main.js
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
  loading: '/static/loading-spinner.svg'
});

html 复制代码

<img v-lazy="'/assets/' + item.productImage" alt="商品图">

Vue 3 可使用vue3-lazyload及Composition API实现类似功能。