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