前端图片渐进式加载
一、技术原理解析
渐进式加载是通过分阶段、按需加载图片，以提升用户体验和页面性能的优化技术。主要包括以下实现方式：
- 懒加载：基于
IntersectionObserverAPI，当图片进入浏览器视口时才发起加载请求，减少初始页面加载量。现代浏览器支持loading="lazy"原生属性，可自动实现延迟加载。 - 低质量占位图：使用模糊占位图（LQIP）或灰色方块占位，在真实图片加载前快速呈现，待图片即将可见时再加载高清版本。
- 骨架屏：在加载过程中展示页面布局的灰色框架，让用户感知页面结构和加载状态。
- 渐进式图像格式：如渐进式JPEG，先以低质量方式加载整体轮廓，再逐层叠加细节，让用户更快看到图片概貌。
其核心原理是先展示轻量化占位内容，缩短用户感知加载时间，再异步加载高清图片，提升整体体验。
二、实现方式与代码示例
1. 原生 HTML/CSS/JS 实现
现代浏览器支持原生懒加载：
<img src="real.jpg" loading="lazy" alt="..." width="..." height="...">
如需更灵活控制，可结合IntersectionObserver：
<img class="lazyload" data-src="high-res.jpg" alt="示例图片" width="600" height="400">
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>标签实现格式兼容与懒加载：
<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库：
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插件：
// main.js
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {loading: '/static/loading-spinner.svg'
});
<img v-lazy="'/assets/' + item.productImage" alt="商品图">
Vue 3 可使用vue3-lazyload及Composition API实现类似功能。