如何使用 HTML 和 JavaScript 延遲載入圖片
在當今快節奏的數位世界中，擁有一個高效能的網站至關重要。其中一個關鍵方面是確保您的圖像有效加載。使用者期望獲得流暢、快速的瀏覽體驗，本文將向您展示如何實現這一目標。
深入研究高效圖像載入的概念（稱為延遲載入），並結合 Intersection Observer API 使用 HTML 和 JavaScript 來發現其實作。
什麼是延遲載入?
延遲加載是一種優化技術，可推遲視覺組件（特別是圖像）的加載，直到需要顯示它們為止。與在網頁到達時預先載入所有圖像相反，這種方法選擇性地獲取當前位於觀看者附近或視野內的圖片。透過提高網站效率，減少初始化所需的時間並節省網路資料傳輸容量。
為什麼要使用延遲載入?
事實上，在網路平台上合併視覺內容的延遲載入存在多種有說服力的理由，包括但不限於:
延遲載入技術的實作可以將影像的載入推遲到需要查看時才加載，從而顯著提高網頁的效能。這種方法不僅減少了初始頁面載入時間，而且使用戶能夠更快地開始與網站交互，最終改善整體用戶體驗。
該網站透過在用戶滾動時動態加載圖像來保持高水準的響應能力，從而消除因提前等待所有內容完全加載而可能導致的滾動和導航的任何滯後或延遲。這種方法允許與網站內容無縫交互，同時保持其整體效能。
延遲載入是一種網頁設計技術，涉及將非必要內容的載入推遲到需要時才加載，從而減少網頁的初始載入時間。透過這種方法節省頻寬，網站可以針對行動裝置和網路連線速度較慢的個人進行更好的優化。因此，延遲載入可以顯著減少網站的整體數據消耗，最終為訪客提供更用戶友好的體驗。
優化搜尋引擎排名在當今的數位環境中至關重要，而在這方面發揮重要作用的關鍵方面是網站效能。具體來說，Google等搜尋引擎在確定在其結果頁面中突出顯示哪些網站時會考慮頁面速度等因素。在這種情況下，延遲載入已被證明對 SEO 表現有正面影響，因為它能夠縮短載入時間，最終改善用戶體驗並提高整體搜尋引擎排名。
鑑於上述優點，請允許我闡明在 Web 應用程式中實作延遲載入的過程。
實作延遲載入:HTML 標記
要啟動流程，需要透過在圖片標籤中合併「loading=‘lazy’」屬性來修改 HTML 標記。
<body>
<main>
<section>
<img src="./image-one-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-two-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-three-high.jpg" alt="" loading="lazy" />
</section>
</main>
</body>
在 HTML 標記上下文中使用的 loading 屬性用於調整網頁上顯示的各種元素的載入行為。透過在 img 標籤內指定“loading=‘lazy’”，瀏覽器將被指示延遲取得相關資源，直到需要渲染或進一步處理為止。
目前，網頁呈現的版面如下:
實作延遲載入:JavaScript 實現
若要增強延遲載入技術的功能，請考慮使用 Intersection Observer API。這個強大的工具允許在元素進入或退出使用者視窗時對其進行監控，從而提供更精確、更有效的內容載入方法。
利用 Intersection Observer 來延遲載入影像的基本原理相對簡單。當網頁最初加載時，它會檢索圖像的分辨率降低版本，而不是用戶無法立即看到的所有高清圖像。
一旦低解析度縮圖出現在瀏覽器的顯示區域中，JavaScript 就會將其替換為更詳細的高清版本。為了實現此功能，您需要對 HTML 程式碼進行一些調整。
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-one-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-one-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-two-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-two-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-three-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-three-high.jpg"
/>
</section>
網頁上的主要視覺元素是低解析度描繪，而優質表示則作為輔助資源。因此，網站以同時包含低等級和高保真圖像的方式呈現自己。
首先，選擇將延遲載入的視覺元素，以獲得更有效率的使用者體驗:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
之後，建立一個IntersectionObserver物件。
const observer = new IntersectionObserver();
事實上，我們將提供一個由「IntersectionObserverEntry」物件集合組成的數組，這些物件封裝了有關受監視元素及其與視覺區域相交的信息，以及充當我們的觀察工具的「IntersectionObserver」實例。
const observer = new IntersectionObserver((lazyImages, observer) => { });
接下來，我們將檢查是否有任何交叉點，並在相應元素接觸時將較低品質的影像替換為較高品質的版本。
const observer = new IntersectionObserver((lazyImages, observer) => {
lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
lazyImage.src = lazyImage.dataset.src; // Swap the image source
observer.unobserve(lazyImage); // Stop observing this image
}
});
});
最後，初始化每個元素的觀察。
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
事實上，透過使用 JavaScript，您已經成功執行了延遲載入策略。
您的瀏覽器不支援影片標籤。
延遲載入註意事項
為了在 Web 應用程式中有效地實現延遲加載，必須考慮幾個關鍵因素。其中包括考慮如何以及何時加載數據，以及確定應延遲加載哪些組件。此外，必須仔細考慮延遲載入對效能和使用者體驗的影響，特別是在網路延遲和可用頻寬方面。確保延遲載入的內容在載入後仍然可以獨立運行，而不依賴尚未取得的其他資源，這一點也很重要。最後，必須採取適當的錯誤處理機制來處理延遲載入過程中可能出現的任何潛在問題。
為了增強可訪問性，必須透過使用“alt”屬性來包含圖像的替代描述。此附加文字被稱為螢幕閱讀器使用者的可靠參考，可確保視障人士也可以從圖像中呈現的內容中獲得意義。
⭐ 瀏覽器相容性:在實作延遲載入之前，確認其與不同瀏覽器的相容性。並非所有瀏覽器都擴充對此功能的支援。在某些情況下，包含 polyfill 可能會變得勢在必行，尤其是對於較舊的瀏覽器。像 CanIUse 這樣的工具是評估瀏覽器相容性的寶貴資源。
對跨越不同設備和顯示器尺寸的延遲加載機制進行全面評估的重要性怎麼強調都不為過。
提高網站速度與使用者體驗
在網站中引入圖像延遲載入是增強其效能並提供改進的用戶體驗的有效方法。透過減少載入時間並促進流暢的導航，這種方法符合當今挑剔的受眾的期望，他們優先考慮快速和無縫互動。
事實上，利用這種方法不僅可以增強搜尋引擎優化，還可以節省頻寬消耗。那麼，您還在等什麼呢?透過採用這種用戶友好且有效的策略，立即開始簡化您的網站。