Image 幾種加載方式

圖像的加載方式可以對性能進行優化，特別是在網頁和應用程序開發中。以下是一些常見的圖像加載方式，可用於性能優化：

1. 圖像壓縮：

使用壓縮工具，如ImageOptim或TinyPNG，減小圖像文件大小，以減少加載時間。減小圖像大小可以降低網頁或應用程序的整體頁面大小，從而提高加載速度。

2. 使用WebP格式：

WebP是一種現代的圖像格式，具有優異的壓縮效率，可以減少圖像文件大小，同時保持高質量。許多瀏覽器都支持WebP格式，因此可以提高網頁的加載速度。

3. 懶加載（Lazy Loading）：

懶加載（Lazy Loading）是一種網頁性能優化技術，用於延遲或遞延加載網頁上的圖像，直到它們出現在用戶的可視區域內。這可以幫助減少網頁的初始加載時間，節省帶寬和提高用戶體驗。以下是懶加載的工作原理：

  1. 延遲載入：當網頁首次加載時，圖像的src屬性不設置，或者將其設置為一個佔位符圖像或者透明像素。這樣，網頁將不會立即請求和下載所有圖像，而僅載入其他內容。

  2. 滾動或交互事件：當用戶滾動瀏覽器視窗或進行特定的交互操作，例如點擊或滑鼠懸停在圖像上時，JavaScript代碼會檢測圖像是否進入可視區域。

  3. 加載圖像：一旦圖像進入可視區域，JavaScript代碼會根據圖像的實際路徑或資源來源，觸發圖像的實際加載。這將使圖像顯示在網頁上。

懶加載的優勢包括：

  1. 減少初始頁面載入時間：由於僅加載可視區域內的圖像，可以大大加快網頁的初始載入速度，特別是對於長頁面或包含多個圖像的網頁。

  2. 節省帶寬：因為圖像僅在需要時加載，可以減少用戶和伺服器之間的帶寬使用，這對於移動設備和有限網絡連接的用戶特別有益。

  3. 改善用戶體驗：懶加載可以降低用戶等待圖像載入的時間，提高整體用戶體驗。

  4. 提高性能：通過減少網頁的初始負載，可以降低伺服器和瀏覽器的負擔，提高整體性能。

  懶加載通常是透過JavaScript庫或框架實現的，例如Intersection Observer API，以監視元素進入可視區域。不同的網頁開發框架和庫可能有自己的懶加載實現方法。這個技術已經成為網頁性能優化的重要工具，特別是對於圖像密集型網頁。

如何在網頁上實現懶加載：

首先選擇所有設置loading=”lazy”的圖像，然後使用Intersection Observer API來監視這些圖像的可視性。當圖像進入可視區域時，觸發回調函數，將data-src屬性的值設置為src，從而觸發圖像的加載。同時，我們還移除了loading屬性，以確保圖像不會再次懶加載。最後，我們停止觀察已加載的圖像，以節省性能。

  1. HTML圖像標籤：

    在HTML中，你可以使用loading屬性來實現懶加載，這是HTML5中引入的。這個屬性可以設置為”lazy”，表示該圖像應該在它進入可視區域之前不加載。

    1
    <img src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Lazy Loaded Image" loading="lazy">

  2. JavaScript實現：

    當用戶滾動網頁或進行交互操作時，需要使用JavaScript來處理圖像的實際加載。你可以使用Intersection Observer API，這是一個用於監視元素進入可視區域的API。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 找到所有懒加载的图像
    const lazyImages = document.querySelectorAll('img[loading="lazy"]');

    // 创建一个 Intersection Observer 实例
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src; // 将 data-src 属性的值设置为 src，触发加载
          lazyImage.removeAttribute('loading'); // 移除 loading 属性
          observer.unobserve(lazyImage); // 停止观察该图像
        }
      });
    });

    // 观察所有的懒加载图像
    lazyImages.forEach(image => {
      observer.observe(image);
    });

4. 緩存圖像：

利用瀏覽器緩存機制，讓瀏覽器在首次訪問網頁後將圖像存儲在本地，以便下次訪問時能夠更快地加載。這可以減少重複下載相同圖像的次數。

5. 使用CDN（內容交付網絡）：

將圖像存儲在CDN上，這樣它們可以更快速地從離用戶更近的伺服器上加載。CDN可以加速圖像的傳遞，降低延遲。

6. 响應式圖像：

使用不同尺寸和分辨率的圖像，根據設備的屏幕大小和分辨率，以確保在各種設備上都能夠提供最佳的性能和圖像質量。

7. 預加載圖像：

預加載將來可能需要的圖像，以減少用戶在導航到新頁面或查看其他部分時的等待時間。

8. 圖像延遲載入：

延遲載入技術可以使網頁或應用程序優先載入重要內容，然後再載入圖像，這有助於提高首次渲染速度。

9. 使用矢量圖形：

對於一些圖示和圖形，可以使用矢量圖形格式，如SVG，它們不受解析度限制，並可以無損縮放，以適應各種螢幕尺寸。