深入了解Lazy-Load

一、什麼是Lazy-Load？

Lazy-Load（懶載入）是一種頁面優化的技術，其主要目的是儘可能地減少頁面的載入時間。它的原理是在頁面載入時，只載入首屏需要渲染的內容，剩餘的內容在用戶主動進行操作之後，再進行非同步載入。

這種技術被廣泛使用在圖片、視頻等資源的載入中，特別是頁面中存在大量的圖片或視頻時，使用Lazy-Load可以顯著地提升頁面的性能表現。隨著移動設備的普及，Lazy-Load的應用也變得越來越重要。

二、為什麼需要使用Lazy-Load

有些時候，在網站或應用中不可避免地需要載入大量的圖片或視頻資源，這些資源會佔用大量的帶寬和時間，導致頁面載入速度過慢。在這種情況下，Lazy-Load就非常有用。

使用Lazy-Load可以將頁面上的圖片或視頻資源分為多個批次進行非同步載入，從而減少頁面的初始載入時間。當用戶滾動頁面或主動進行操作時，Lazy-Load會根據用戶的操作，按需載入剩餘的資源。

三、Lazy-Load的實現方式

1. 原生JavaScript實現

//使用原生JavaScript實現圖片的Lazy-Load
const images = document.querySelectorAll('img[data-src]');
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.setAttribute('src', entry.target.getAttribute('data-src'));
      observer.unobserve(entry.target);
    }
  });
}, options);

images.forEach(image => {
  observer.observe(image);
});

原生JavaScript實現Lazy-Load的核心是使用IntersectionObserver API，該API可以監聽元素與視圖的交集部分，並且當交集部分達到一定比例時觸發回調函數。以圖片的Lazy-Load為例，我們可以將圖片的真實地址存儲在data-src屬性中，使用IntersectionObserver監聽圖片元素與視圖的交集部分，當交集部分達到一定比例時，將data-src屬性的值賦給src屬性，從而實現圖片的載入。

2. 第三方庫實現

除了原生JavaScript實現Lazy-Load之外，我們還可以使用第三方庫來實現。其中最常用的庫包括jQuery Lazy、Lazyload.js等。

//使用jQuery Lazy實現圖片的Lazy-Load
$('img.lazy').lazy();

使用第三方庫實現Lazy-Load相對來說更加簡單，我們只需要引入對應的庫文件，然後調用對應的API即可。以jQuery Lazy為例，我們只需要在img標籤中添加class=”lazy”，然後在JavaScript中調用$(‘img.lazy’).lazy()即可實現圖片的Lazy-Load。

3. 響應式圖片實現Lazy-Load

對於響應式圖片，我們可以使用srcset屬性來實現Lazy-Load。srcset屬性可以指定不同大小的圖片，瀏覽器會自動選擇最合適的圖片進行載入。

//使用響應式圖片的srcset屬性實現Lazy-Load

使用srcset屬性實現Lazy-Load的方式非常簡單，我們只需要將需要載入的圖片的大小放到srcset屬性中，然後在sizes屬性中指定每個圖片所佔的寬度比例，瀏覽器會根據窗口大小自動選擇最合適的圖片進行載入。

四、Lazy-Load的注意事項

1. 圖片的佔位符

在Lazy-Load中，我們需要給圖片設置佔位符，以免圖片還未載入時出現頁面抖動的情況。

//使用圖片佔位符

我們可以使用一個低解析度的占點陣圖片來佔位，當圖片真正載入完成後，再將佔點陣圖片替換為真實圖片。

2. 圖片的緩存

在Lazy-Load中，由於圖片是非同步載入的，所以需要注意圖片的緩存問題。

//使用localStorage緩存圖片
if (localStorage.getItem('real-image.jpg')) {
  const image = new Image();
  image.src = localStorage.getItem('real-image.jpg');
  document.body.appendChild(image);
} else {
  const image = new Image();
  image.onload = () => {
    localStorage.setItem('real-image.jpg', image.src);
    document.body.appendChild(image);
  };
  image.src = 'real-image.jpg';
}

可以使用localStorage等方式對圖片進行緩存，避免每次打開頁面都要重新載入圖片。

3. JavaScript兼容性

在使用IntersectionObserver API時，需要注意瀏覽器的兼容性問題。如果使用的瀏覽器不支持IntersectionObserver，可以考慮使用IntersectionObserver的polyfill。

4. 圖片的大小

在使用Lazy-Load時，需要注意圖片的實際大小和壓縮大小。如果圖片的實際大小非常大，即使使用Lazy-Load也無法減少頁面的載入時間。因此，需要對圖片進行壓縮和優化，避免過大的圖片文件。

五、總結

Lazy-Load是一種較為常見的頁面優化技術，可以有效減少頁面的載入時間，提升用戶的瀏覽體驗。使用Lazy-Load可以將頁面上的圖片或視頻資源分為多個批次進行非同步載入，從而減少頁面的初始載入時間。在實現Lazy-Load時，需要注意圖片的佔位符、緩存、JavaScript兼容性以及圖片的大小等問題。