亲宝软件园·资讯

展开

利用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中的元素一个接一个出现,就可以明显看到图片是一个接一个进行加载的。

加载全部内容

相关教程
猜你喜欢
用户评论