詳細了解JavaScript中的延遲載入

在這篇文章中，我們將看看延遲載入在web上是如何運作的。我們將介紹本地延遲載入API——延遲載入是如何實現的，延遲載入的重要性和優點，最後是一個簡單的延遲載入web內容用例。

瞭解延遲載入API及其運作方式將有助於已經使用實作這些技術的函式庫和框架的開發人員了解底層的情況。此外，如果他們打算實現自己的延遲載入庫，他們將能夠執行更多的指導研究並應用他們學到的技術。

對於一個真實的用例，那些透過平台上的廣告獲得收入的行銷和廣告公司可以很容易地優化和應用延遲加載，從而很容易地判斷哪些廣告被訪問他們平台的用戶看到，從而做出更好的商業決策。

推薦教學：《JavaScript影片教學》

#什麼是延遲載入?

根據Wikipedia的介紹，延遲載入是一種設計模式，用於在需要時延遲元素或物件的初始化。這意味著僅當使用者在網頁上捲動時，相對於父DOM元素的目標DOM元素才會被載入並可見（當兩個元素之間存在交集時，基於設定的閾值）。

不採用這種模式的缺點可能導致:

• 由於從一個或多個來源獲取多個圖像或其他web資源的多個同步網路請求或批次請求，導致頁面效能嚴重延遲

• 由於要下載/取得的套件的大小而增加頁面載入時間

• 使用者保留率低，主要適用於網路連線較差的地區。當我們開發人員犯了不儘早實現延遲載入的錯誤時，用戶完全避免使用平台的情況並不少見

• 由於圖像、iframe和視訊等資源或資產處理不當，對web效能和可訪問性造成巨大影響

目前，大多數現代和更新的瀏覽器在web上都支援延遲載入。但是，對於還沒有提供這種支援的瀏覽器，實作這種技術的填充或庫在它們之上提供了簡單的API層。

延遲載入解決了減少初始頁面載入時間的問題-僅顯示使用者在初始化網頁時以及隨後捲動頁面時需要查看的資源，例如圖片或其他內容。

眾所周知，Web效能和可訪問性問題是多方面的;減少頁面大小、記憶體佔用和一般的載入時間可以為web平台做出很大貢獻。當我們有一堆圖像和視頻，並且在瀏覽器DOM初始化時一次性加載它們時，延遲加載的優點就變得很明顯了。

當然，您現在應該已經理解了這將導致什麼，正如我們前面所討論的。

從資料來看，大多數網站都嚴重依賴圖像和其他網路內容，例如影片或iframe，來將訊息傳遞給目標受眾。雖然這可能看起來瑣碎而簡單，但是我們向用戶顯示這些內容的方式最終決定了我們的平台的效能。

此外，有助於優化頁面載入時間的操作(例如依賴使用者是否滾動到頁面特定部分的事件)是延遲載入的一些用例。隨著本文的繼續，我們將更了解現實環境中的其他用例。

本機延遲載入API

延遲載入建構在交集觀察者API的基礎上，交集觀察者API是一種瀏覽器API，它提供了一種方法來偵測或知道一個稱為目標、父元素的元素何時在瀏覽器視窗內可用或可見(視情況而定)。

當這種情況發生時，將呼叫處理程序函數來幫助處理程式碼邏輯的其他部分，稍後我們將看到這一點。

有了這個新的和改進的瀏覽器API，我們還可以知道兩個DOM元素何時相交——這裡的意思是，目標DOM元素何時進入瀏覽器的視口，或者與另一個元素(很可能是它的父元素)相交。

為了更好地理解延遲載入是如何運作的，我們首先必須理解如何建立一個交集觀察者。為了創建一個交集觀察者，我們所需要做的就是偵聽交集觀察者事件的發生，並在這種事件發生時觸發一個回呼函數或處理程序來運行。

交集觀察者事件是一種類似文件事件類別的瀏覽器事件，其中包含DOMContentLoaded事件。

注意:對於交集事件，我們需要指定要套用交集的元素。這個元素通常被稱為根元素。但是，如果沒有指定根元素，則表示我們打算針對整個瀏覽器視窗。

此外，我們還需要為根元素指定一個空白(如果提供了)，以便在必要時可以在交集上輕鬆地更改其形狀或大小。讓我們看一個例子來更好地理解它:

let options = {
root: null,
rootMargin: 10px,
threshold: 1.0
}

let observer  = new IntersectionObserver (options, callback);

在上面的程式碼片段中，我們看到了一個用於建立觀察者的簡單用例。 options物件幫助我們定義目標的自訂屬性。

這裡，options物件中的threshold屬性表示何時觸發回呼。它的預設值為0，這意味著一旦使用者接近目標元素並且它變得可見，就會觸發回調。

另一方面，根元素是父元素，當目標元素在使用者捲動網頁時對使用者可見時，根元素充當目標元素的視區。注意，如果根設定為空，父元素將自動成為視區。

最後，rootMargin幫助設定根元素周圍的空白。例如，在計算目標元素和父元素/viewport之間的交集之前，可能需要調整它的大小、邊距或維度。

而且，接受兩個輸入參數的回呼包括一個我們打算套用於目標元素和呼叫回呼的觀察者的intersectionObserverEntry物件清單。

回呼的簽章如下:

let callback = (entries, observer) => {
entries.forEach(entry => {
If (entry.isIntersection) {
// do some magic here
}
// and some other methods
})
}

該intersectionObserverEntry物件表示父元素和目標元素之間存在交集。它有一堆的API中的屬性，其中包括isIntersection，intersectionRatio，intersectionRect，target，time ，等。

我們需要針對特定的DOM元素，並在它與父元素相交時觸發回呼函數。目標DOM元素的一個例子如下面的程式碼片段所示:

let target = document.querySelector("#targetElement");

在上面的程式碼片段中，我們創建了一個目標元素並為它分配了一個變數。之後，我們使用intersectionObserver建構子/函式簽章上的observe方法觀察目標元素，如下所示:

// start observing for changes on the target element
observer.observe(target);

當觀察者為目標設定的閾值達到時，將觸發回呼。

最後，observe()方法告訴觀察者要觀察什麼目標元素。請注意，交集觀察者在它的API中同樣有一堆方法:unObserve()、takeRecords()、observe()等就是一些例子。

延遲載入技術的優點

現在，我們必須更好地理解為什麼延遲載入web內容和資產是必要的。讓我們來看看使用這種技術的一些進一步的優勢:

• 建立可高度存取的web應用程式。關於web可訪問性的討論是今天的首要任務。使用這種技術肯定有助於建立一個範圍更廣的平台

• 高用戶保留。如果web平台與驅動業務目標以及提供價值相關聯，那麼實現這種技術將有助於使平台更加用戶友好。 web標準稍後會感謝您的!

• 作為開發人員，您可能需要在web平台上實現無限滾動。理解這個概念將大有幫助，從而提供即時的業務價值

#實作延遲載入

讓我們來看一個在網頁上延遲載入圖片的簡單範例。我們將開始自訂的選項物件的目標元素，我們打算觀察的交集:

let  options = {
root: document.querySelector('.root'),
rootMargin: '0px, 0px, 100px, 0px'
};

現在，對於目標元素，我們來定位幾個圖像：

let  images = [...document.querySelectorAll('.targetImages')];

現在，讓我們看看實現回調:

const callback = (entries) => {

entries.forEach(entry => {
 If (entry.isIntersecting) {
    observer.unObserve('entry.target');
}
// handle other code logic here 
})
}

我們可以繼續呼叫交集觀察者建構函數來觀察目標元素，基於它的options物件中指定的自訂:

let observer = new intersectionObserver(options, callback);

最後，我們可以觀察到要觀察的目標元素：

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

注意:為了簡單起見，這裡不包含HTML和CSS程式碼。透過在MDN文件中查看此範例，您可以詳細了解如何實現此技術。

總結

現在，當我們在網頁上有一堆圖像或視頻，並在瀏覽器DOM初始化時加載它們時，這種技術的優勢就會非常明顯。作為開發人員，我們有責任確保我們管理或維護的平台的最佳效能，特別是當它們與業務目標相關聯時。

作為一種web效能技術，延遲載入有助於解決這類問題。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是詳細了解JavaScript中的延遲載入的詳細內容。更多資訊請關注PHP中文網其他相關文章！