前端圖片漸進式加載
一、技術原理解析
漸進式加載是通過分階段、按需加載圖片，以提升用戶體驗和頁面性能的優化技術。主要包括以下實現方式：
- 懶加載：基于
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實現類似功能。
