利用IntersectionObserver实现动态渲染的示例详解
萌鱼 人气:0前言
开发表格时,希望支持可视后的动态加载。在查找资料做了一些尝试后,最终使用IntersectionObserver,相对方便地实现了该功能
IntersectionObserver诞生已经有几年了,所以它的兼容性目前已经达到可以使用的程度了。具体兼容程度以及详细API可参考CDN
实现
懒加载组件
核心就是利用了IntersectionObserver的能力,封装了LazyContainer组件,该组件的children,只有在视口中可见时,才会真正渲染
export const LazyContainer = (props) => { const { children } = props; const $ref = useRef<HTMLDivElement>(null); const [isReady, setReady] = useState(false); useEffect(() => { const observer = new IntersectionObserver((entries) => { // 一个observer可以监听多个元素,本例中只有一个 entries.forEach((entry) => { // isIntersecting:目标元素与观察者元素(一般为视口)是否相交 if (!isReady && entry.isIntersecting) { setReady(true); // 首次加载完后,便停止监听 observer.disconnect(); } }); }); observer.observe($ref.current as Element); }, []); return <div ref={$ref}>{isReady ? children : null}</div>; };
长列表组件示意
简洁实现一个长列表,测试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> ); };
测试
在页面上测试一下该功能
<LongList loop={3}> <LazyContainer num={1}> {/* 利用img加载做一个测试 */} <img src="图片地址"></img> </LazyContainer> </LongList>
在chrome network中开启slow 3G,然后让LongList中的元素一个接一个出现,就可以明显看到图片是一个接一个进行加载的。
加载全部内容