這篇文章主要介紹JavaScript中的延遲加載是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證，主要從事網(wǎng)站制作、成都做網(wǎng)站、企業(yè)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁制作、做網(wǎng)站、建網(wǎng)站。成都創(chuàng)新互聯(lián)公司擁有實(shí)力堅(jiān)強(qiáng)的技術(shù)研發(fā)團(tuán)隊(duì)及素養(yǎng)的視覺設(shè)計(jì)專才。

在這篇文章中，我們將看看延遲加載在web上是如何工作的。我們將介紹本地延遲加載API——延遲加載是如何實(shí)現(xiàn)的，延遲加載的重要性和優(yōu)點(diǎn)，最后是一個(gè)簡單的延遲加載web內(nèi)容用例。

理解延遲加載API及其工作方式將幫助已經(jīng)使用實(shí)現(xiàn)這些技術(shù)的庫和框架的開發(fā)人員了解底層的情況。此外，如果他們打算實(shí)現(xiàn)自己的延遲加載庫，他們將能夠執(zhí)行更多的指導(dǎo)研究并應(yīng)用他們學(xué)到的技術(shù)。

對(duì)于一個(gè)真實(shí)的用例，那些通過平臺(tái)上的廣告獲得收入的營銷和廣告公司可以很容易地優(yōu)化和應(yīng)用延遲加載，從而很容易地判斷哪些廣告被訪問他們平臺(tái)的用戶看到，從而做出更好的商業(yè)決策。

什么是延遲加載?

根據(jù)Wikipedia的介紹，延遲加載是一種設(shè)計(jì)模式，用于在需要時(shí)推遲元素或?qū)ο蟮某跏蓟?。這意味著僅當(dāng)用戶在網(wǎng)頁上滾動(dòng)時(shí)，相對(duì)于父DOM元素的目標(biāo)DOM元素才被加載并可見（當(dāng)兩個(gè)元素之間存在交集時(shí)，基于設(shè)置的閾值）。

不采用這種模式的缺點(diǎn)可能導(dǎo)致:

• 由于從一個(gè)或多個(gè)源獲取多個(gè)圖像或其他web資源的多個(gè)同步網(wǎng)絡(luò)請(qǐng)求或批處理請(qǐng)求，導(dǎo)致頁面性能嚴(yán)重滯后

• 由于要下載/獲取的包的大小而增加頁面加載時(shí)間

• 用戶保留率低，主要適用于互聯(lián)網(wǎng)連接較差的地區(qū)。當(dāng)我們開發(fā)人員犯了不盡早實(shí)現(xiàn)延遲加載的錯(cuò)誤時(shí)，用戶完全避免使用平臺(tái)的情況并不少見

• 由于圖像、iframe和視頻等資源或資產(chǎn)處理不當(dāng)，對(duì)web性能和可訪問性造成巨大影響

目前，大多數(shù)現(xiàn)代和更新的瀏覽器在web上都支持延遲加載。但是，對(duì)于還沒有提供這種支持的瀏覽器，實(shí)現(xiàn)這種技術(shù)的填充或庫在它們之上提供了簡單的API層。

延遲加載解決了減少初始頁面加載時(shí)間的問題-僅顯示用戶在初始化網(wǎng)頁時(shí)以及隨后滾動(dòng)頁面時(shí)需要查看的資源，例如圖像或其他內(nèi)容。

眾所周知，Web性能和可訪問性問題是多方面的;減少頁面大小、內(nèi)存占用和一般的加載時(shí)間可以為web平臺(tái)做出很大貢獻(xiàn)。當(dāng)我們有一堆圖像和視頻，并且在瀏覽器DOM初始化時(shí)一次性加載它們時(shí)，延遲加載的優(yōu)點(diǎn)就變得很明顯了。

當(dāng)然，您現(xiàn)在應(yīng)該已經(jīng)理解了這將導(dǎo)致什么，正如我們前面所討論的。

從數(shù)據(jù)來看，大多數(shù)網(wǎng)站都嚴(yán)重依賴圖像和其他網(wǎng)絡(luò)內(nèi)容，比如視頻或iframe，來將信息傳遞給目標(biāo)受眾。雖然這可能看起來瑣碎而簡單，但是我們向用戶顯示這些內(nèi)容的方式最終決定了我們的平臺(tái)的性能。

此外，有助于優(yōu)化頁面加載時(shí)間的操作(比如依賴于用戶是否滾動(dòng)到頁面特定部分的事件)是延遲加載的一些用例。隨著本文的繼續(xù)，我們將更多地了解現(xiàn)實(shí)環(huán)境中的其他用例。

本機(jī)延遲加載API

延遲加載構(gòu)建在交集觀察者API的基礎(chǔ)上，交集觀察者API是一種瀏覽器API，它提供了一種方法來檢測或知道一個(gè)稱為目標(biāo)、父元素的元素何時(shí)在瀏覽器視口內(nèi)可用或可見(視情況而定)。

當(dāng)這種情況發(fā)生時(shí)，將調(diào)用處理程序函數(shù)來幫助處理代碼邏輯的其他部分，稍后我們將看到這一點(diǎn)。

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

為了更好地理解延遲加載是如何工作的，我們首先必須理解如何創(chuàng)建一個(gè)交集觀察者。為了創(chuàng)建一個(gè)交集觀察者，我們所需要做的就是偵聽交集觀察者事件的發(fā)生，并在這種事件發(fā)生時(shí)觸發(fā)一個(gè)回調(diào)函數(shù)或處理程序來運(yùn)行。

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

注意:對(duì)于交集事件，我們需要指定要應(yīng)用交集的元素。這個(gè)元素通常被稱為根元素。但是，如果沒有指定根元素，則意味著我們打算針對(duì)整個(gè)瀏覽器窗口。

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

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

let observer  = new IntersectionObserver (options, callback);

在上面的代碼片段中，我們看到了一個(gè)用于創(chuàng)建觀察者的簡單用例。options對(duì)象幫助我們定義目標(biāo)的自定義屬性。

這里，options對(duì)象中的threshold屬性表示何時(shí)觸發(fā)回調(diào)。它的默認(rèn)值為0，這意味著一旦用戶接近目標(biāo)元素并且它變得可見，就會(huì)觸發(fā)回調(diào)。

另一方面，根元素是父元素，當(dāng)目標(biāo)元素在用戶滾動(dòng)網(wǎng)頁時(shí)對(duì)用戶可見時(shí)，根元素充當(dāng)目標(biāo)元素的視區(qū)。注意，如果根設(shè)置為空，父元素將自動(dòng)成為視區(qū)。

最后，rootMargin幫助設(shè)置根元素周圍的空白。例如，在計(jì)算目標(biāo)元素和父元素/viewport之間的交集之前，可能需要調(diào)整它的大小、邊距或維數(shù)。

而且，接受兩個(gè)輸入?yún)?shù)的回調(diào)包括一個(gè)我們打算應(yīng)用于目標(biāo)元素和調(diào)用回調(diào)的觀察者的intersectionObserverEntry對(duì)象列表。

回調(diào)的簽名如下:

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

該intersectionObserverEntry對(duì)象表示父元素和目標(biāo)元素之間存在交集。它有一堆的API中的屬性，其中包括isIntersection，intersectionRatio，intersectionRect，target，time，等。

我們需要針對(duì)特定的DOM元素，并在它與父元素相交時(shí)觸發(fā)回調(diào)函數(shù)。目標(biāo)DOM元素的一個(gè)例子如下面的代碼片段所示:

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

在上面的代碼片段中，我們創(chuàng)建了一個(gè)目標(biāo)元素并為它分配了一個(gè)變量。之后，我們使用intersectionObserver構(gòu)造函數(shù)/函數(shù)簽名上的observe方法觀察目標(biāo)元素，如下所示:

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

當(dāng)觀察者為目標(biāo)設(shè)置的閾值達(dá)到時(shí)，將觸發(fā)回調(diào)。

最后，observe()方法告訴觀察者要觀察什么目標(biāo)元素。請(qǐng)注意，交集觀察者在它的API中同樣有一堆方法:unObserve()、takeRecords()、observe()等是一些例子。

延遲加載技術(shù)的優(yōu)點(diǎn)

現(xiàn)在，我們必須更好地理解為什么延遲加載web內(nèi)容和資產(chǎn)是必要的。讓我們來看看使用這種技術(shù)的一些進(jìn)一步的優(yōu)勢(shì):

• 構(gòu)建可高度訪問的web應(yīng)用程序。關(guān)于web可訪問性的討論是今天的首要任務(wù)。使用這種技術(shù)肯定有助于建立一個(gè)范圍更廣的平臺(tái)

• 高用戶保留。如果web平臺(tái)與驅(qū)動(dòng)業(yè)務(wù)目標(biāo)以及提供價(jià)值相關(guān)聯(lián)，那么實(shí)現(xiàn)這種技術(shù)將有助于使平臺(tái)變得更加用戶友好。web標(biāo)準(zhǔn)稍后會(huì)感謝您的!

• 作為開發(fā)人員，您可能需要在web平臺(tái)上實(shí)現(xiàn)無限滾動(dòng)。理解這一概念將大有幫助，從而提供即時(shí)的業(yè)務(wù)價(jià)值

實(shí)施延遲加載

讓我們來看一個(gè)在網(wǎng)頁上延遲加載圖像的簡單例子。我們將開始自定義的選項(xiàng)對(duì)象的目標(biāo)元素，我們打算觀察的交集:

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

現(xiàn)在，對(duì)于目標(biāo)元素，我們來定位幾個(gè)圖像：

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

現(xiàn)在，讓我們看看實(shí)現(xiàn)回調(diào):

const callback = (entries) => {

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

我們可以繼續(xù)調(diào)用交集觀察者構(gòu)造函數(shù)來觀察目標(biāo)元素，基于它的options對(duì)象中指定的定制:

let observer = new intersectionObserver(options, callback);

最后，我們可以觀察到要觀察的目標(biāo)元素：

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

注意:為了簡單起見，這里不包括HTML和CSS代碼。通過在MDN文檔中查看此示例，您可以詳細(xì)了解如何實(shí)現(xiàn)此技術(shù)。

總結(jié)

現(xiàn)在，當(dāng)我們?cè)诰W(wǎng)頁上有一堆圖像或視頻，并在瀏覽器DOM初始化時(shí)加載它們時(shí)，這種技術(shù)的優(yōu)勢(shì)就會(huì)非常明顯。作為開發(fā)人員，我們有責(zé)任確保我們管理或維護(hù)的平臺(tái)的最佳性能，特別是當(dāng)它們與業(yè)務(wù)目標(biāo)相關(guān)聯(lián)時(shí)。

作為一種web性能技術(shù)，延遲加載有助于解決這類問題。

以上是JavaScript中的延遲加載是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！