資訊專欄INFORMATION COLUMN
摘要：接下來，我們需要利用對這些暫時看不見的圖片元素進(jìn)行觀察，當(dāng)確認(rèn)他們滾動到了窗體的可視區(qū)域時，我們在回調(diào)函數(shù)中對其進(jìn)行加載。創(chuàng)建一個，配置元素和回調(diào)函數(shù)觸發(fā)機(jī)制，這里我們將這個設(shè)為。
點(diǎn)擊查看視頻教程哦！?。?！ intersection Observer簡介
點(diǎn)擊查閱MDN關(guān)于此api的使用說明
這個api是用來檢測dom元素交集的，常見的應(yīng)用場景之一就是本文提到的對圖片進(jìn)行懶加載，即：拖動窗口滾動條，到達(dá)當(dāng)前這個圖片的時候，再去讀取掛在自定義屬性（比如："data-src"）上的url地址，之后將該url地址寫到到src屬性上去進(jìn)行下載、展示這個圖片。因此，我們關(guān)注的重點(diǎn)是：該圖片是否滾動到了當(dāng)前窗口的可視區(qū)域。通常解決的辦法是，監(jiān)聽窗口元素的scroll事件，在事件處理程序中對圖片的位置做判斷。然而，這么做的一個弊端是，因?yàn)閖s是單線程的，而scroll事件出現(xiàn)的又很密集，每次都去響應(yīng)scroll事件可能會影響用戶體驗(yàn)。
intersection Observer的誕生就是為了處理這種類似于上文提到的元素交集檢測。它會觀察我們的目標(biāo)元素，當(dāng)目標(biāo)元素出現(xiàn)在root元素的可視區(qū)域時便會觸發(fā)一個（我們事先放進(jìn)去的）回調(diào)函數(shù)，于是我們可以在回調(diào)函數(shù)里面處理業(yè)務(wù)邏輯。
這里出現(xiàn)了兩個小概念，對應(yīng)于本文實(shí)現(xiàn)的圖片懶加載功能來說：
目標(biāo)元素：指的就是那些我們需要懶加載的圖片
root元素指的就是目標(biāo)元素的父窗口，比如這里的圖片的父元素容器
利用intersection Observer實(shí)現(xiàn)懶加載點(diǎn)此查看該案例的stackblitz
查看該案例：
在index.html頁面內(nèi)有一個scrollContainer，在里面首先是放了幾段文字，之后是5個img元素，并將img的url地址寫在了自定義屬性"data-src"內(nèi)。
在css文件內(nèi)定義了一些樣式，其中，move-in是在我們對圖片真正進(jìn)行加載時才會添加的動畫效果。
現(xiàn)在，無論我們怎么拖動滾動條都無法看見圖片，因?yàn)槲覀儍H僅是把img的url寫在了自定義屬性中而不是src屬性中。接下來，我們需要利用intersection Observer對這些暫時看不見的圖片元素進(jìn)行觀察，當(dāng)確認(rèn)他們滾動到了窗體的可視區(qū)域時，我們在回調(diào)函數(shù)中對其進(jìn)行加載。
創(chuàng)建一個observer：const observer = new IntersectionObserver(callback，option)
option配置root元素和回調(diào)函數(shù)觸發(fā)機(jī)制，這里我們將scrollContainer這個div設(shè)為root。
callback就是當(dāng)檢測到目標(biāo)元素與root元素交集時會調(diào)用的函數(shù)，形如：
(entrances, observer)=>{
// entrances是個數(shù)組對象，包含了所有的目標(biāo)元素，通常我們會遍歷它們，并判斷每一個多帶帶的個體是否與root元素產(chǎn)生了交集，如果是，那么我們就會執(zhí)行一些邏輯
}
連接目標(biāo)元素
剛才我們創(chuàng)建了observer，并且設(shè)置了它的root元素，現(xiàn)在需要告訴這個observer，我們需要觀察哪些目標(biāo)元素與此root元素的交集。
通過observer.observe(target)進(jìn)行鏈接
const imgs = document.querySelectorAll("img") //獲取所有待觀察的目標(biāo)元素
var options = {
root: document.querySelector(".scrollContainer"),
rootMargin: "0px",
threshold: 1.0
}
function lazyLoad(target) {
const observer = new IntersectionObserver((entrances, observer) => {
entrances.forEach(entrance => {
if (entrance.isIntersecting) {
const img = entrance.target;
const src = img.getAttribute("data-src");
img.setAttribute("src", src)
img.classList.add("move-in")
observer.disconnect()
}
})
}, options);
observer.observe(target)
}
imgs.forEach(lazyLoad)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101479.html
摘要：此外，跟蹤尚未延遲加載的元素數(shù)量，以及取消綁定滾動事件處理程序的繁瑣工作將由開發(fā)者來完成。圖像延遲加載列表圖順序加載的組件已經(jīng)開源啦有興趣的同學(xué)可以查看使用起來非常簡單圖片延時加載十分重要，尤其是對于移動端用戶。 從理論上來看，圖像延遲加載機(jī)制十分簡單，但實(shí)際上卻有很多需要注意的細(xì)節(jié)。 此外，有多個不同的用例均受益于延遲加載。 首先，我們來了解一下在 HTML 中延遲加載內(nèi)聯(lián)圖像。 延遲加載...
摘要：新檢測原理允許你配置一個回調(diào)函數(shù)，每當(dāng)進(jìn)入瀏覽器視窗時，觸發(fā)回調(diào)函數(shù)?；卣{(diào)函數(shù)案例源碼地址元素和元素相交程度達(dá)到該值的時候注冊的回調(diào)函數(shù)將會被執(zhí)行。默認(rèn)值是意味著只要有一個像素出現(xiàn)在元素中，回調(diào)函數(shù)將會被執(zhí)行。 前言 一直以來，檢測元素在瀏覽器視窗口內(nèi)不是件容易的事，很多解決方案都不能很準(zhǔn)確的判斷，計算量也有可能拖慢網(wǎng)站性能。但是很多場景都需要用到： 當(dāng)頁面滾動時，懶加載圖片或其他內(nèi)...
摘要：同時，懶加載按需加載概念至關(guān)重要。時至今日，這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動手實(shí)現(xiàn)一個按需加載輪子。同樣，對于組件也可以使用無狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無疑更加簡潔。 組件化在當(dāng)今前端開發(fā)領(lǐng)域中是一個非常重要的概念。著名的前端類庫，比如 React、Vue 等對此概念都倍加推崇。確實(shí)，組件化復(fù)用性（reusability）和模塊性（modularization...
摘要：同時，懶加載按需加載概念至關(guān)重要。時至今日，這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動手實(shí)現(xiàn)一個按需加載輪子。同樣，對于組件也可以使用無狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無疑更加簡潔。 組件化在當(dāng)今前端開發(fā)領(lǐng)域中是一個非常重要的概念。著名的前端類庫，比如 React、Vue 等對此概念都倍加推崇。確實(shí)，組件化復(fù)用性（reusability）和模塊性（modularization...
閱讀 3607·2021-08-02 13:41
閱讀 2523·2019-08-30 15:56
閱讀 1541·2019-08-30 11:17
閱讀 1207·2019-08-29 15:18
閱讀 610·2019-08-29 11:10
閱讀 2704·2019-08-26 13:52
閱讀 541·2019-08-26 13:22
閱讀 2988·2019-08-23 15:41
