摘要:主要用于元素可見性的監(jiān)聽,比傳統(tǒng)通過全局監(jiān)聽事件去判斷可見性無論是性能還是便利性都要好得多。問題是這種通過監(jiān)聽的方式很容易導(dǎo)致性能問題,或者多多少少會(huì)有些性能損失。
IntersectionObserver主要用于元素可見性的監(jiān)聽,比傳統(tǒng)通過全局監(jiān)聽scroll事件去判斷可見性無論是性能還是便利性都要好得多。因?yàn)閍pi比較新,存在兼容性問題,好在已經(jīng)有了兼容的polyfill.其基本介紹和使用方式都可以在該polyfill對應(yīng)網(wǎng)站上看到。這里主要通過例子的形式,說明其實(shí)用的場景。
圖片懶加載 之前的方式以前我們實(shí)現(xiàn)圖片懶加載的原理是這樣的:
</>復(fù)制代碼
window.addEventListener("scroll", lazyload);
function lazyload() {
const imgs = document.querySelector(".img");
const innerHeight = util.innerHeight();
const scrollTop = util.scrollTop();
imgs.forEach((img) => {
const imgOffsetH = util.getPosition(img).top;
// 距離頁面頂部的距離 <= 視窗高 + 往上滾進(jìn)去的距離
if(imgOffsetH <= innerHeight + scrollTop) {
img.src = img.getAttribute("data-src");
}
})
}
條件是:距離頁面頂部的距離 <= 視窗高 + 往上滾進(jìn)去的距離,即算做圖片可見了才加載它。問題是這種通過監(jiān)聽scroll的方式很容易導(dǎo)致性能問題,或者多多少少會(huì)有些性能損失。
IntersectionObserver的方式</>復(fù)制代碼
const io = new IntersectionObserver((entrys) => {
entrys.forEach((img) => {
if(!img.isIntersecting) return;
img.src = img.getAttribute("data-src");
io.unobserve(img);
})
}, {
//即滾動(dòng)到距離底部50px時(shí)開始算交互區(qū)
rootMargin:"0px 0px 50px 0px"
})
imgs.forEach((img) => {
io.observe(img);
})
非常的清晰和簡單,而且由于是原生的功能,不會(huì)引起性能損耗。這里的rootMargin參數(shù)非常好用,因?yàn)橐话闱闆r下的交互條件都需要添加一定的閾值,以實(shí)現(xiàn)更優(yōu)雅和流暢的體驗(yàn),而通過rootMargin能非常簡單的實(shí)現(xiàn)這點(diǎn)。
</>復(fù)制代碼
完整示例請參考lazyload.html
滾動(dòng)分頁
以前的方式
通過判斷滾動(dòng)是否到底部,即 視窗高+往上滾進(jìn)去的距離>= 頁面高,來作為加載新的一頁的條件:
</>復(fù)制代碼
window.addEventListener("scroll", () => {
const innerHeight = util.innerHeight();
const scrollTop = util.scrollTop();
const scrollHeight = util.scrollHeight();
// 滾動(dòng)到距離底部50px
if(innerHeight + scrollTop >= scrollHeight - 50) {
loadMore();
}
});
IntersectionObserver的方式
在最底部設(shè)置一個(gè)加載更多的標(biāo)記器,監(jiān)聽它是否出現(xiàn),作為加載新頁的條件:
</>復(fù)制代碼
const io = new IntersectionObserver((entrys) => {
entrys.forEach((entry) => {
if(!entry.isIntersecting) return;
loadMore();
})
}, {
rootMargin:"0px 0px 50px 0px"
})
//監(jiān)聽最底部的loadmore是否出現(xiàn)
const lMore = document.querySelector(".load-more");
io.observe(lMore);
在性能上仍然更勝一籌,而且不必每次都去判斷視窗高、滾進(jìn)去的距離等等,將以往很麻煩的事情變得簡單而快捷。
</>復(fù)制代碼
完整示例請參考paging.html
通過上面的兩個(gè)例子,基本能了解IntersectionObserver的功能實(shí)用場景,即監(jiān)聽元素的出現(xiàn),實(shí)現(xiàn)懶加載(可以是圖片、模版、甚至組件等等)、元素進(jìn)出動(dòng)畫、分頁等各種形式的功能。這對優(yōu)化整個(gè)頁面的性能還是非常有幫助的,所以在日常的項(xiàng)目中還是很值得嘗試。
</>復(fù)制代碼
本文收錄在個(gè)人的Github上https://github.com/kekobin/bl... ,覺得有幫助的,歡迎start哈。支持原創(chuàng),未經(jīng)本人同意,請勿轉(zhuǎn)載!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/105176.html
摘要:一掛在上的上最常用的只有其中,永遠(yuǎn)都是窗口的大小,跟隨窗口變化而變化。這個(gè)是距該元素最近的不為的祖先元素,如果沒有則指向元素。 在Javascript的開發(fā)過程中,我們總會(huì)看到類似如下的邊界條件判斷(懶加載): const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.b...
摘要:配置項(xiàng)配置項(xiàng)中的參數(shù)有以下三個(gè)所監(jiān)聽對象的具體祖先元素,默認(rèn)是計(jì)算交叉狀態(tài)時(shí),將附加到祖先元素上,從而有效的擴(kuò)大或者縮小祖先元素判定區(qū)域設(shè)置一系列的閾值,當(dāng)交叉狀態(tài)達(dá)到閾值時(shí),會(huì)觸發(fā)回調(diào)函數(shù)。 一、前言 ??通常情況下,HTML 中的圖片資源會(huì)自上而下依次加載,而部分圖片只有在用戶向下滾動(dòng)頁面的場景下才能被看見,否則這部分圖片的流量就白白浪費(fèi)了。 ??所以,對于那些含有大量圖片資源的網(wǎng)...
摘要:同時(shí),懶加載按需加載概念至關(guān)重要。時(shí)至今日,這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動(dòng)手實(shí)現(xiàn)一個(gè)按需加載輪子。同樣,對于組件也可以使用無狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無疑更加簡潔。 組件化在當(dāng)今前端開發(fā)領(lǐng)域中是一個(gè)非常重要的概念。著名的前端類庫,比如 React、Vue 等對此概念都倍加推崇。確實(shí),組件化復(fù)用性(reusability)和模塊性(modularization...
摘要:同時(shí),懶加載按需加載概念至關(guān)重要。時(shí)至今日,這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動(dòng)手實(shí)現(xiàn)一個(gè)按需加載輪子。同樣,對于組件也可以使用無狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無疑更加簡潔。 組件化在當(dāng)今前端開發(fā)領(lǐng)域中是一個(gè)非常重要的概念。著名的前端類庫,比如 React、Vue 等對此概念都倍加推崇。確實(shí),組件化復(fù)用性(reusability)和模塊性(modularization...
閱讀 2910·2021-11-24 09:38
閱讀 3523·2021-11-23 09:51
閱讀 994·2021-09-09 11:52
閱讀 4043·2021-08-11 11:18
閱讀 1119·2019-08-30 14:05
閱讀 3237·2019-08-30 11:23
閱讀 1775·2019-08-29 17:02
閱讀 1136·2019-08-26 13:49
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要