利用IntersectionObserver實(shí)現(xiàn)動(dòng)態(tài)渲染的示例詳解
前言
開(kāi)發(fā)表格時(shí),希望支持可視后的動(dòng)態(tài)加載。在查找資料做了一些嘗試后,最終使用IntersectionObserver,相對(duì)方便地實(shí)現(xiàn)了該功能
IntersectionObserver誕生已經(jīng)有幾年了,所以它的兼容性目前已經(jīng)達(dá)到可以使用的程度了。具體兼容程度以及詳細(xì)API可參考CDN
實(shí)現(xiàn)
懶加載組件
核心就是利用了IntersectionObserver的能力,封裝了LazyContainer組件,該組件的children,只有在視口中可見(jiàn)時(shí),才會(huì)真正渲染
export const LazyContainer = (props) => { const { children } = props; const $ref = useRef<HTMLDivElement>(null); const [isReady, setReady] = useState(false); useEffect(() => { const observer = new IntersectionObserver((entries) => { // 一個(gè)observer可以監(jiān)聽(tīng)多個(gè)元素,本例中只有一個(gè) entries.forEach((entry) => { // isIntersecting:目標(biāo)元素與觀察者元素(一般為視口)是否相交 if (!isReady && entry.isIntersecting) { setReady(true); // 首次加載完后,便停止監(jiān)聽(tīng) observer.disconnect(); } }); }); observer.observe($ref.current as Element); }, []); return <div ref={$ref}>{isReady ? children : null}</div>; };
長(zhǎng)列表組件示意
簡(jiǎn)潔實(shí)現(xiàn)一個(gè)長(zhǎng)列表,測(cè)試LazyContainer組件
export const LongList = (props) => { const { loop = 1, children } = props; return ( <ul> {Array.from({ length: loop }).map((x, i) => { return ( <li style={{ height: '200px', marginBottom: '20px' }}> {React.cloneElement(children, { key: i, num: i })} </li> ); })} </ul> ); };
測(cè)試
在頁(yè)面上測(cè)試一下該功能
<LongList loop={3}> <LazyContainer num={1}> {/* 利用img加載做一個(gè)測(cè)試 */} <img src="圖片地址"></img> </LazyContainer> </LongList>
在chrome network中開(kāi)啟slow 3G,然后讓LongList中的元素一個(gè)接一個(gè)出現(xiàn),就可以明顯看到圖片是一個(gè)接一個(gè)進(jìn)行加載的。
到此這篇關(guān)于利用IntersectionObserver實(shí)現(xiàn)動(dòng)態(tài)渲染的示例詳解的文章就介紹到這了,更多相關(guān)IntersectionObserver動(dòng)態(tài)渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果,涉及javascript面向?qū)ο蠹笆录O(jiān)聽(tīng)、響應(yīng)機(jī)制相關(guān)操作技巧,需要的朋友可以參考下2017-02-02ros::spin() 和 ros::spinOnce()函數(shù)的區(qū)別及詳解
這篇文章主要介紹了ros::spin() 和 ros::spinOnce()函數(shù)的區(qū)別及詳解的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感謝興趣的朋友一起看看吧2016-10-10使用JavaScript實(shí)現(xiàn)LRU緩存的代碼詳解
LRU(Least?Recently?Used)算法是一種廣泛應(yīng)用于內(nèi)存管理和緩存系統(tǒng)的策略,本文將介紹LRU算法的基本原理,并通過(guò)JavaScript實(shí)現(xiàn)案例,幫助讀者理解其在前端開(kāi)發(fā)中的應(yīng)用場(chǎng)景,需要的朋友可以參考下2024-05-05PDF.js前端開(kāi)發(fā)使用代碼示例及實(shí)用技巧
pdf.js是一款Nozilla開(kāi)發(fā)的、用于網(wǎng)頁(yè)上顯示pdf文檔的Javascript庫(kù),提供pdf文件的在線閱讀,這篇文章主要給大家介紹了關(guān)于PDF.js前端開(kāi)發(fā)使用實(shí)用技巧的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04H5+C3+JS實(shí)現(xiàn)雙人對(duì)戰(zhàn)五子棋游戲(UI篇)
這篇文章主要為大家詳細(xì)介紹了H5+C3+JS實(shí)現(xiàn)雙人對(duì)戰(zhàn)五子棋游戲,實(shí)現(xiàn)雙人對(duì)戰(zhàn)模式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-09-09JS中用try catch對(duì)代碼運(yùn)行的性能影響分析
要捕獲JavaScript代碼中的異常一般會(huì)采用 try catch,不過(guò)try catch的使用是否是對(duì)代碼性能產(chǎn)生影響呢?答案是肯定有的,但是有多少不得而知。下面這篇文章就給大家詳細(xì)介紹了在JS中用try catch對(duì)代碼運(yùn)行的性能影響,有需要的朋友們可以參考借鑒。2016-12-12