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

  • IntersectionObserver API 详解篇

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

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

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

  • 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>

  • 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的示例详解

    在日常工作中,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动态代理的示例详解

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

  • 利用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创建位置生成器的示例详解

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

  • 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

  • 基于JS正则表达式实现模板数据动态渲染(实现思路详解)

    最近业务上需要动态渲染模板数据,好久没写前端代码了,有点生疏,将思路简单写下来,防老: 一.业务需求: 1.前端后端定义好模板以及变量名,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板需要调用打印机打印出来 3.模板相对商家来说比较固定,但是每个商家需要的模板都有可能不一样,所以需要每次登录后,查询一次模板缓存前端,后续每次支付后,动态渲染数据即可 二.考点: 1.正则表达式 2.精简代码量,尽量减少前端的工作量​ 三.实现思路: 1.需要渲染数据的模板,以${变量名}区

  • 利用Python如何生成hash值示例详解

    一.介绍 如果在Python中需要对用户输入的密码或者其他内容进行加密,首选的方法是生成hash值. 在Python中可以利用二个模块来进行: - crypt - hashlib 二.crypt (一)crypt的主要方法和常量 名称 描述 md5(-) 利用md5算法加密 sha1(-) 利用sha1算法加密 sha224(-) 利用sha224算法加密 sha256(-) 利用sha256算法加密 sha384(-) 利用sha384算法加密 sha512(-) 利用sha512算法加密 (

随机推荐

其他