Lottie 的ProgressiveLoad 设置实际上是做什么的？

编程问答 2022-05-14

问题描述

我正在为 Airbnb 的 lottie-web 使用一个名为 react-lottie 的 React 包装器来在页面上显示动画。

然而，大部分动画都在页面的初始视口下方，我想实现延迟加载，以便从我的 CDN 中获取延迟直到需要。

import React from 'react'
import Lottie from 'react-lottie'

const HomePage = () => {
    const animationStyle = {
        // styles here
    }

    const animationoptions = {
        loop: false,autoplay: false,renderer: 'svg',path: 'https://somepath.net/to/a/CDN/resource/animation.json',rendererSettings: {
            progressiveLoad: true,},}

    return (
        <div>
            {* Other stuff here *}
            <Lottie style={animationStyle} options={animationoptions} />
        </div>
    )
}

现在，如果我打开浏览器开发人员工具的“网络”选项卡并访问该页面，我会看到在呈现页面时获取了 animation.json。由于我已打开 progressiveLoad，因此我希望在呈现页面时不会看到它被获取，而是在我滚动到实际使用组件的位置附近时被获取。

现在这可能是对 progressiveLoading 设置有效的误解，但可以在某种程度上说明这里发生了什么以及我如何实现我最终想要的资源延迟加载？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

lottielottiereactjsreactjsreactjsreactjs