自定義網站延遲加載的最佳方法

已發表: 2019-07-29

延遲加載用於延遲某些圖像或網頁元素的加載，以供用戶訪問網頁時使用。 這通常用於首屏下方的圖像和網站元素。 這個想法是，不是一次性加載整個網頁，而是在用戶不斷向下滾動時加載網頁的某些部分。

目錄隱藏
<img> 標籤屬性：
1. 使用 JavaScript 事件：
2.使用路口觀察者API：
CSS背景屬性：

使用延遲加載的主要好處是它減少了整個網站的加載時間。 延遲加載通過首先加載訪問者可以立即開始觀看或閱讀的頂部來提高網站的性能並提供更好的用戶體驗。 當訪問者來到您的網頁並且必須等待很長時間時，他們就會失去興趣並且可能會離開。 但是，如果您在加載網頁的其餘部分時立即給他們一些觀看或閱讀的內容，您可以讓他們與您的網站保持聯繫。 延遲加載的第二個優點是降低成本。 僅當網站訪問者訪問網站的特定部分時，才會下載圖像。 因此，如果訪問者不向下滾動，他們的設備上下載的數據就會減少，從而節省資金。

由於這些優勢，延遲加載是改善網站用戶體驗和效率的絕佳方式。

您可以通過兩種方式為您的網站自定義延遲加載——使用 CSS 背景屬性或使用 <img> 標籤。 然而，<img> 標記方法在這兩種方法中更為常見，因為這種技術易於使用。

<img> 標籤屬性：

為網站自定義延遲加載的最佳方法 - 圖像標籤 別針

當使用 <img> 標籤時，瀏覽器使用 src 屬性來觸發圖像加載。 它是代碼中的第 1 個圖像還是第 100 個圖像都沒有關係。 如果瀏覽器接收到 src 屬性，就會觸發圖片加載。 因此，要延遲加載這些圖像，請將圖像 URL 添加到 src 以外的屬性中。 例如，如果將圖像 URL 放在 data-src 屬性中，則瀏覽器不會觸發圖像加載，因為 src 屬性為空。

現在預先加載已經停止，我們需要告訴瀏覽器何時應該加載圖像。 我們希望在圖像進入視口後立即觸發圖像的加載。 有兩種方法可以檢查圖像進入視口的時間：

1. 使用 JavaScript 事件：

為網站自定義延遲加載的最佳方法 - Javascript 別針

在這種技術中，事件偵聽器用於瀏覽器中的大小調整、方向更改和滾動事件。 滾動事件是最明顯的事件。 它用於檢查用戶何時滾動網頁。 'orientationChange' 和 'resize' 事件對於延遲加載同樣重要。 當瀏覽器窗口的大小發生變化時，將觸發 resize 事件。 'orientationChange' 事件在設備從縱向模式旋轉到橫向模式時發生，反之亦然。 在這些情況下，屏幕上可見的圖像數量會發生變化，因此我們需要觸發圖像加載。

當這些事件之一發生時，我們會查找頁面上尚未加載的所有圖像。 通過檢查當前在視口中的網頁上所有未加載的圖像，我們找出需要立即加載的圖像。 這是使用當前文檔滾動頂部、窗口高度和圖像的頂部偏移量來完成的。

如果圖像已進入視口，我們從 data-src 屬性中獲取圖像 URL，並將其放在觸發圖像加載的 src 屬性中。 然後我們必須從圖像中刪除惰性類，因為這個類會使圖像延遲加載。 加載所有圖像後，將刪除事件偵聽器。

在滾動的情況下，滾動事件連續觸發。 因此，為了提高性能，我們可以添加一個小的超時來限制延遲加載的執行。

2.使用路口觀察者API：

為網站自定義延遲加載的最佳方式 - Intersection Observer 別針

Intersection Observer API 是瀏覽器中相對較新的 API。 這種技術使得檢測元素進入視口的時間變得非常簡單。 與以前的方法相比，這種技術無需使用複雜的數學即可提供出色的性能。

首先，我們必須將觀察者附加到所有需要延遲加載的圖像上。 當 API 檢測到圖像進入視口時，它會從 data-src 中選擇 URL，並使用 'isIntersecting' 方法將其放入 src 屬性中以觸發圖像加載。 之後，惰性類與觀察者一起被移除。

與使用 JavaScript 事件相比，Intersection Observer API 運行迅速，不會使網站在滾動時顯得遲緩。 使用事件偵聽器技術，我們必須添加一個超時，這會增加一點延遲。 但是，並非所有瀏覽器都支持 Intersection Observer API。 因此，事件監聽器已成為用戶的流行選擇。

CSS背景屬性：

為網站自定義延遲加載的最佳方法 - CSS 背景 別針

為了加載 CSS 背景圖像，瀏覽器必須構建 CSS 對像模型 (CSSOM) 以及文檔對像模型 (DOM) 來決定 CSS 樣式是否將應用於現有文檔中存在的 DOM。 如果 CSS 規則不適用於元素，瀏覽器將不會加載背景圖像。

使用這種技術，當元素進入視口時，我們會應用 background-image CSS 屬性。 CSS中有一個ID為bg-image（背景圖片）的元素。 一旦將惰性類添加到圖像中，在 CSS 技術中，我們會覆蓋 bg-image 屬性並將其設為無。

在 CSS 中將 .lazy 類添加到 #bg-image 比單獨使用 #bg-image 更受歡迎。 最初，瀏覽器將 background-image: none 應用於元素。 一旦我們滾動瀏覽網頁，事件偵聽器或 Intersection Observer 就會檢測到視口中存在的圖像並刪除 .lazy 類。 這不適用於 CSS 技術，因為 bg-image 屬性應用於觸發背景圖像加載的元素。

因此，這裡有兩種方法可以自定義您自己的延遲加載網站。 這兩種技術都提供了卓越的結果。 然而，如果你想要一個簡單的技術，你應該選擇 <img> 標籤。 有很多插件可供 WordPress 用戶在他們的 WordPress 網站上自定義延遲加載圖像。 使用這些插件為您的 WordPress 網站優化圖像以及延遲加載將提高您網站的性能，提供更好的體驗並幫助 SEO。