圖片懶加載通過延遲加載非首屏圖片提升頁面性能。具體方案有三種：1.基于scroll事件監聽，通過判斷圖片是否進入視窗加載圖片，但需優化觸發頻率；2.使用intersection observer api實現異步監聽，性能更優；3.使用loading=”lazy”屬性原生支持。此外，占位圖應與實際圖片尺寸一致并采用低質量圖片或css漸變設計。加載失敗時應顯示默認圖、支持重試及錯誤提示，并監控上報錯誤。對SEO影響方面，應確保搜索引擎可抓取圖片，合理使用alt屬性并配合cdn加速。
圖片懶加載，簡單來說，就是先不加載那些不在用戶當前視窗內的圖片，等到它們快要進入視窗時再加載。這樣做可以大幅減少頁面初始加載時的http請求數量，加快頁面渲染速度，提升用戶體驗。
解決方案
實現圖片懶加載的核心思路就是：延遲加載。具體來說，就是先把標簽的src屬性設置為空，然后將真實的圖片地址放到一個自定義屬性中，比如data-src。當頁面滾動時，通過JavaScript判斷圖片是否進入視窗，如果進入，就把data-src的值賦給src，這樣圖片就開始加載了。
這里提供三種常用的實現方案：
-
基于scroll事件監聽
這是最傳統的做法。監聽window的scroll事件，每次滾動時都檢查是否有圖片進入視窗。
const images = document.querySelectorAll('img[data-src]'); function lazyLoad() { images.forEach(img => { if (isInViewport(img) && img.dataset.src) { img.src = img.dataset.src; img.removeAttribute('data-src'); // 防止重復加載 } }); } function isInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // 頁面加載完成時執行一次，防止首屏圖片未加載 lazyLoad(); window.addEventListener('scroll', lazyLoad); window.addEventListener('resize', lazyLoad); // 監聽resize事件，防止窗口大小變化導致圖片顯示問題這種方案的缺點是scroll事件觸發頻率很高，如果頁面圖片很多，會頻繁執行lazyLoad函數，可能導致性能問題。可以考慮使用throttle或debounce來優化。
-
使用Intersection Observer API
這是更現代、更高效的方案。Intersection Observer可以監聽元素是否進入視窗，而且是異步的，不會阻塞主線程。
const images = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.removeAttribute('data-src'); observer.unobserve(img); // 加載完成后停止觀察 } }); }); images.forEach(img => { observer.observe(img); });這種方案的優點是性能更好，而且代碼更簡潔。
-
配合loading=”lazy”屬性
現代瀏覽器已經原生支持loading=”lazy”屬性，可以直接在
標簽上使用，無需編寫任何JavaScript代碼。
@@##@@
這種方案最簡單，但兼容性可能存在問題，需要根據實際情況選擇。
副標題1
圖片懶加載的占位圖應該如何設計？
占位圖的作用是在圖片加載完成之前，先顯示一個臨時的圖片，防止頁面出現空白。占位圖的設計直接影響用戶體驗。
- 顏色和尺寸: 占位圖的顏色應該與頁面背景色相近，尺寸應該與實際圖片一致，避免頁面布局發生跳動。
- 使用低質量圖片: 可以使用實際圖片的低質量版本作為占位圖，這樣用戶至少可以看到圖片的輪廓。
- 使用SVG占位符: 使用SVG可以創建簡單的矢量圖形作為占位符，體積小，不會影響頁面加載速度。
- 使用css漸變: 使用CSS漸變可以創建平滑的顏色過渡效果，作為占位圖，視覺效果更好。
選擇哪種方案取決于具體的需求和設計風格。
副標題2
如何處理懶加載圖片加載失敗的情況？
圖片加載失敗是很常見的問題，必須妥善處理，否則會影響用戶體驗。
- 顯示默認圖片: 可以設置一個默認圖片，當圖片加載失敗時，顯示這個默認圖片。
- 重試加載: 可以嘗試重新加載圖片，但要避免無限循環加載。可以設置一個最大重試次數。
- 顯示錯誤信息: 可以顯示錯誤信息，提示用戶圖片加載失敗。
- 監控錯誤: 使用onerror事件監聽圖片加載錯誤，并上報到監控系統，方便排查問題。
錯誤處理是保證用戶體驗的重要環節，不可忽視。
副標題3
懶加載對SEO有什么影響？如何優化？
懶加載雖然可以提升用戶體驗，但也可能對SEO產生負面影響。如果搜索引擎無法抓取到懶加載的圖片，可能會影響網站的排名。
- 確保搜索引擎可以抓取圖片: 確保搜索引擎可以執行JavaScript代碼，或者提供noscript標簽，包含圖片的真實地址。
- 使用loading=”lazy”屬性: 搜索引擎通常可以識別loading=”lazy”屬性，并正確抓取圖片。
- 優化圖片大小: 優化圖片大小可以減少加載時間，提升SEO效果。
- 使用CDN: 使用CDN可以加速圖片加載速度，提升SEO效果。
- 使用正確的alt屬性: 為圖片添加正確的alt屬性，方便搜索引擎理解圖片內容。
總而言之，懶加載需要謹慎使用，并進行適當的優化，才能保證SEO效果。
