圖片懶加載是指延遲加載視口外的圖片，以提升首屏加載速度并優化用戶體驗。1. 使用 loading=”lazy” 屬性實現原生懶加載，無需額外代碼；2. 利用 intersection observer api 實現更靈活的控制，如預加載；3. 通過監聽 scroll 事件判斷圖片是否進入視口，但性能較差；4. 使用第三方庫如 lazyload 或 lozad.JS 簡化開發流程。為避免圖片閃爍，需設置固定寬高、使用 aspect-ratio 屬性或添加占位符。優化性能方面包括避免過度使用懶加載、合理設置加載閾值、使用 cdn 和 http/2、壓縮圖片及利用 service worker 緩存。SEO 方面需確保搜索引擎可執行 JavaScript，或使用 noscript 標簽提供備用方案，并可通過 lighthouse 工具檢測優化效果。
圖片懶加載，簡單來說，就是頁面上的圖片不是一次性全部加載，而是當圖片進入用戶視口（或者說即將進入視口）時才進行加載。 這樣可以顯著提升首屏加載速度，優化用戶體驗，尤其是在圖片較多的頁面上。
圖片懶加載優化方法
解決方案
實現圖片懶加載的核心思路是：延遲加載視口外的圖片。 具體方法有很多，下面列舉幾種常見的：
立即學習“前端免費學習筆記（深入）”；
-
使用 loading=”lazy” 屬性（原生懶加載）
這是最簡單的方法，現代瀏覽器都支持 loading 屬性。只需要在
標簽中添加 loading=”lazy” 即可。
@@##@@
瀏覽器會自動處理圖片的懶加載，無需編寫額外的 JavaScript 代碼。 性能方面，原生懶加載通常表現良好，但不同瀏覽器的實現可能存在差異。
-
使用 Intersection Observer API
Intersection Observer API 提供了一種異步觀察目標元素與其祖先元素或 viewport 相交情況的方法。 我們可以利用它來判斷圖片是否進入視口，然后動態加載圖片。
const images = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.removeAttribute('data-src'); // 移除 data-src 屬性，避免重復加載 observer.unobserve(img); // 停止觀察 } }); }); images.forEach(img => { observer.observe(img); });html:
@@##@@
這種方法更加靈活，可以自定義加載時機，例如在圖片進入視口前預先加載。
-
使用 JavaScript 監聽 scroll 事件
這是比較傳統的做法，通過監聽 scroll 事件，計算圖片距離頁面頂部的距離，判斷是否進入視口。
function lazyLoad() { const images = document.querySelectorAll('img[data-src]'); const viewportTop = window.pageYOffset; const viewportBottom = viewportTop + window.innerHeight; images.forEach(img => { const imgTop = img.offsetTop; if (imgTop >= viewportTop && imgTop <= viewportBottom) { img.src = img.dataset.src; img.removeAttribute('data-src'); } }); } window.addEventListener('scroll', lazyLoad); window.addEventListener('resize', lazyLoad); // 監聽 resize 事件，防止頁面縮放導致圖片未加載 document.addEventListener('DOMContentLoaded', lazyLoad); // 頁面加載完成后執行一次HTML:
@@##@@
這種方法實現起來比較簡單，但性能不如 Intersection Observer API，因為 scroll 事件觸發頻率很高。
-
使用第三方庫
有很多成熟的 JavaScript 庫可以幫助我們實現懶加載，例如：
- LazyLoad: 一個輕量級的懶加載庫，使用簡單，功能強大。
- lozad.js: 基于 Intersection Observer API 的懶加載庫，性能優秀。
使用第三方庫可以簡化代碼，提高開發效率。
如何選擇合適的懶加載方法？
選擇哪種懶加載方法取決于你的項目需求和技術棧。
-
如果你的項目只需要簡單的懶加載，并且兼容性要求不高，可以使用 loading=”lazy” 屬性。 這是最簡單快捷的方法。
-
如果需要更精細的控制，例如預加載、自定義加載時機等，可以使用 Intersection Observer API。 這種方法性能較好，也比較靈活。
-
如果需要兼容舊版本瀏覽器，可以使用 JavaScript 監聽 scroll 事件。 但要注意性能優化，避免頻繁觸發 scroll 事件。
-
如果希望快速實現懶加載，并且不想自己編寫大量的 JavaScript 代碼，可以使用第三方庫。 選擇一個成熟、可靠的庫可以節省大量時間和精力。
懶加載后圖片出現閃爍怎么辦？
懶加載后圖片出現閃爍通常是因為圖片加載過程中，元素的高度塌陷，導致頁面重新布局。 解決這個問題的方法是：
-
預先設置圖片容器的寬高。 在
標簽上設置 width 和 height 屬性，或者使用 css 設置容器的寬高。 這樣可以防止圖片加載過程中，元素的高度塌陷。@@##@@
-
使用 CSS aspect-ratio 屬性。 aspect-ratio 屬性可以設置元素的寬高比，瀏覽器會根據寬高比自動計算元素的高度。
img { aspect-ratio: 3 / 2; /* 設置寬高比為 3:2 */ object-fit: cover; /* 保持圖片比例，并填充整個容器 */ } -
使用占位符。 在圖片加載完成之前，顯示一個占位符，例如一個灰色方塊或者一個加載動畫。 這樣可以防止頁面重新布局，減少閃爍感。
<div class="image-container"> @@##@@ <div class="placeholder"></div> </div>
.image-container { position: relative; width: 600px; height: 400px; } .placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f0f0f0; z-index: 1; } .image-container.loaded .placeholder { display: none; } img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
如何優化懶加載的性能？
懶加載本身是為了優化性能，但如果使用不當，反而會降低性能。 以下是一些優化懶加載性能的建議：
-
避免過度使用懶加載。 對于首屏可見的圖片，應該直接加載，而不是使用懶加載。 過度使用懶加載反而會增加 HTTP 請求，降低首屏加載速度。
-
合理設置懶加載的閾值。 閾值是指圖片距離視口多遠時開始加載。 如果閾值設置過小，會導致圖片頻繁加載，影響性能。 如果閾值設置過大，會導致用戶在滾動頁面時，圖片加載不及時，影響用戶體驗。
-
使用 CDN 加速圖片加載。 CDN 可以將圖片緩存到離用戶更近的服務器上，提高圖片加載速度。
-
對圖片進行壓縮和優化。 壓縮圖片可以減少圖片的大小，提高加載速度。 可以使用在線圖片壓縮工具，或者使用構建工具（例如 webpack、Parcel）進行圖片優化。
-
使用 HTTP/2 協議。 HTTP/2 協議支持多路復用，可以同時發送多個請求，提高頁面加載速度。
-
使用 Service Worker 緩存圖片。 Service Worker 可以緩存圖片，減少 HTTP 請求，提高頁面加載速度。
懶加載對 SEO 有影響嗎？
懶加載可能會對 SEO 產生一定的影響。 如果搜索引擎無法抓取到懶加載的圖片，可能會影響頁面的排名。 為了避免這種情況，可以采取以下措施：
-
確保搜索引擎可以執行 JavaScript 代碼。 搜索引擎需要執行 JavaScript 代碼才能抓取到懶加載的圖片。
-
使用 noscript 標簽提供圖片的備用方案。 如果搜索引擎無法執行 JavaScript 代碼，可以使用 noscript 標簽提供圖片的備用方案。
@@##@@ <noscript> @@##@@ </noscript>
-
使用 Google 的 Lighthouse 工具測試懶加載的 SEO 效果。 Lighthouse 工具可以檢測頁面是否存在 SEO 問題，并提供優化建議。
總的來說，合理使用懶加載可以提高用戶體驗和頁面性能，但需要注意 SEO 優化，確保搜索引擎可以抓取到懶加載的圖片。
