利用IntersectionObserver实现动态渲染的示例详解

目录
  • 前言
  • 实现
    • 懒加载组件
    • 长列表组件示意
  • 测试

前言

开发表格时，希望支持可视后的动态加载。在查找资料做了一些尝试后，最终使用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中的元素一个接一个出现，就可以明显看到图片是一个接一个进行加载的。

到此这篇关于利用IntersectionObserver实现动态渲染的示例详解的文章就介绍到这了,更多相关IntersectionObserver动态渲染内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 谈谈IntersectionObserver懒加载的具体使用

    谈谈IntersectionObserver懒加载的具体使用

    概念 IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段.祖先元素与视窗(viewport)被称为根(root). 这是MDN上给的官方概念,不用去管它,我粘出来只是为了显得专业点嘛... 重点看这里 监听目标元素与其祖先或视窗交叉状态的手段 ,其实就是观察一个元素是否在视窗可见. 可以看到,交叉了就是说明当前元素在视窗里,当前就是可见的了. API var

  • IntersectionObserver实现图片懒加载的示例

    IntersectionObserver实现图片懒加载的示例

    API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 直接上源码: <!DOCTYPE html> <html> <header> <style> .list-item{ height: 400px; margin: 5px; background-color: lightblue; list-style: none; } </style>

  • 交叉观察器 IntersectionObserver用法详解

    目录 1. 背景 2. 兼容性 3. 用法 3.1 observe 3.2 unobserve 3.3 disconnect 3.4 takeRecords 注意: 4. callback 参数 5. IntersectionObserverEntry 对象 6. 应用 注意点 1. 背景 网页开发时,不管是在移动端,还是PC端,都有个很重要的概念,叫做动态懒加载,适用于一些图片资源(或者数据)特别多的场景中,这个时候,我们常常需要了解某个元素是否进入了“视口”(viewport),即用户能不能

  • 可视化埋点平台元素曝光采集intersectionObserver思路实践

    目录 正文 设计方案 测验结论 完整的伪代码 正文 最近一直在开发可视化埋点系统,其中元素的曝光埋点,就是借助了 intersectionObserver 这个原生 api.也是网上推荐度比较高的方案,同时 2022 年,该 api 兼容性也已经很高,同时也有 polyfill,基本上使用无虞. intersectionObserver 本身 api 非常简单,但是在实际使用的过程中,由于可视化埋点的一些特殊性以及对埋点准确性的要求,还是遇到了一些 dom 变更后的边缘场景,本文便是对这些边缘场

  • IntersectionObserver判断是否在可视区域详解

    目录 前言 概念 使用 注意 前言 在日常的开发过程中,有时候会有一些要求判断节点是否进入可视化区域的需求.例如:判断信息是否在可视区域曝光再进行曝光,图片懒加载等.通常我们可以通过scroll和getBoundingclient来进行判断. el.offsetTop - document.documentElement.scrollTop <= 视口高度 // 或 el.getBoundingClientRect().top <= 视口高度 但是scroll,getBoundingclien

  • IntersectionObserver API 详解篇

    IntersectionObserver API 详解篇

    温馨提示:本文目前仅适用于在 Chrome 51 及以上中浏览. 2016.11.1 追加,Firefox 52 也已经实现. 2016.11.29 追加,Firefox 的人担心目前规范不够稳定,未来很难保证向后兼容,所以禁用了这个 API,需要手动打开 dom.IntersectionObserver.enabled 才行. IntersectionObserver API 是用来监视某个元素是否滚动进了浏览器窗口的可视区域(视口)或者滚动进了它的某个祖先元素的可视区域内.它的主要功能是用来

  • 利用IntersectionObserver实现动态渲染的示例详解

    目录 前言 实现 懒加载组件 长列表组件示意 测试 前言 开发表格时,希望支持可视后的动态加载.在查找资料做了一些尝试后,最终使用IntersectionObserver,相对方便地实现了该功能 IntersectionObserver诞生已经有几年了,所以它的兼容性目前已经达到可以使用的程度了.具体兼容程度以及详细API可参考CDN 实现 懒加载组件 核心就是利用了IntersectionObserver的能力,封装了LazyContainer组件,该组件的children,只有在视口中可见时

  • C语言编程gcc如何生成静态库.a和动态库.so示例详解

    C语言编程gcc如何生成静态库.a和动态库.so示例详解

    目录 一.什么是静态库和动态库 二.gcc生成.a静态库和.so动态库 1.生成静态库(.a) 1.1编辑生成例子程序hello.h.hello.c和main.c 1.2将hello.c编译成.o文件 1.3由.o文件创建静态库 1.4在程序中使用静态库 1.5验证静态库的特点 2.生成动态库(.so) 2.1由.o文件创建动态库文件 2.2在程序中使用动态库 三.实例 1.实例1 1.1代码 1.2 静态库.a文件的生成与使用 1.3 动态库.so文件的生成与使用 2.实例2 2.1代码 2.

  • 利用Python自动生成PPT的示例详解

    利用Python自动生成PPT的示例详解

    在日常工作中,PPT制作是常见的工作,如果制作创意类PPT,则无法通过自动化的形式生成,因为创意本身具有随机性,而自动化解决的是重复性工作,两者有所冲突. python-pptx是python处理PPT的一个库,注重的是读和写,无法导出,没有渲染功能. 废话不多说,第一步,安装python-pptx库: pip3 install -i https://pypi.doubanio.com/simple/ python-pptx ppt里面处理的主要对象一般为文本框,表格,图片. 每一页的ppt为一

  • java 与testng利用XML做数据源的数据驱动示例详解

    java 与testng利用XML做数据源的数据驱动示例详解 testng的功能很强大,利用@DataProvider可以做数据驱动,数据源文件可以是EXCEL,XML,YAML,甚至可以是TXT文本.在这以XML为例: 备注:@DataProvider的返回值类型只能是Object[][]与Iterator<Object>[] TestData.xml: <?xml version="1.0" encoding="UTF-8"?> <

  • Java动态代理的示例详解

    Java动态代理的示例详解

    目录 定义 分类 案例 需求 方案一:jdk动态代理 方案二:cglib动态代理 分析 总结 定义 动态代理指的是,代理类和目标类的关系在程序运行的时候确定的,客户通过代理类来调用目标对象的方法,是在程序运行时根据需要动态的创建目标类的代理对象. 分类 jdk动态代理 cglib动态代理 案例 需求 苹果公司通过苹果代理商来卖手机 方案一:jdk动态代理 定义抽象接口 /** * 售卖手机的接口(代理模式--抽象角色) * @author:liyajie * @createTime:2022/2

  • 利用Pygame制作简单动画的示例详解

    利用Pygame制作简单动画的示例详解

    目录 前言 计时器 绘制精灵 加载精灵 完整代码 前言 实现一个帧动画,使用的一个图,根据不同的时间显示不同的图. 使用的就是如下所示的一张图,宽度780 * 300 ,使用加载图片 260 * 150来实现. pygame.init() screen = pygame.display.set_mode((400, 300), 0, 32) pygame.display.set_caption("动画") while True: for event in pygame.event.ge

  • 利用Python创建位置生成器的示例详解

    利用Python创建位置生成器的示例详解

    目录 介绍 开始 步骤 创建训练数据集 创建测试数据集 将合成图像转换回坐标 放在一起 结论 介绍 在这篇文章中,我们将探索如何在美国各地城市的地图数据和公共电动自行车订阅源上训练一个快速生成的对抗网络(GAN)模型. 然后,我们可以通过为包括东京在内的世界各地城市创建合成数据集来测试该模型的学习和概括能力. git clone https://github.com/gretelai/GAN-location-generator.git 在之前的一篇博客中,我们根据电子自行车订阅源中的精确位置数

  • Vue 服务端渲染SSR示例详解

    Vue 服务端渲染SSR示例详解

    目录 手写Vue服务端渲染 一.开始vue-ssr之旅 二.采用模板渲染 三.ssr目录创建 四.通过webpack实现编译vue项目 app.js client-entry.js server-entry.js 五.配置客户端打包和服务端打包 六.配置运行脚本 七.服务端配置 七.通过json配置createBundleRenderer方法 八.集成VueRouter 配置入口文件 配置组件信息 防止刷新页面不存在 保证异步路由加载完成 十.集成vuex配置 在后端更新vuex 在浏览器运行时

  • Qt利用QJson实现解析数组的示例详解

    目录 前言 第一步:进行数据转换 第二步:将字符串转成QJsonDocument格式 第三步:解析json数据 前言 现在有这样一个json结构,需要使用QJson来解析,结构如下: "code": "0001", "descrip": "文本描述1详细描述", "id": "1", "title": "文本1标题", "type&quo

  • 利用Python实现智能合约的示例详解

    目录 智能合约 1. 是什么 2. 使用场景 用Python如何实现 1. 设计智能合约 2. 编写智能合约源代码 3. 编译智能合约 4. 部署智能合约 5. 调用智能合约方法 6. 监控智能合约事件 7. 升级智能合约 智能合约 1. 是什么 智能合约是一种由计算机程序编写的自动化合约,它可以在没有第三方干预的情况下执行交易和契约条款.智能合约使用区块链技术实现,可以实现不同的功能,例如交易.投票.代币发放和数据存储等.智能合约的执行是基于其代码的逻辑,并且在既定条件满足时自动执行.智能合约

随机推荐