@frontity/lazyload

中文文档
1.0.12发布于 2018/10/26MITCommonJS近 30 天下载 2393

React 的懒惰负载组件, 有快度

中文使用文档

懒惰

以懒惰方式加载内容的易用组件.

用这个 快捷键 以获取 cs 属性的值并避免可能的布局/回流垃圾.

此外,懒惰负载组件的能见度是使用 window 默认作为参考。 也可以在滚动容器内使用组件,例如用滚动条进行分解,但如果想要这样做,必须通过 container 道具 (英语).

依据 反射懒惰负载。 。 。 .

安装

npm i @frontity/lazyload

道具

集装箱

类型 Element|Window

用于计算 LazyLoad 组件能见度的 DOM 元素的引用 . 默认是 window。 。 。 .

页:1

类型 : Number|String 默认 : 0

别名 : threshold

这个 offset 选项允许您在下面的左侧和右侧指定您想要的视图端口 开始 显示您的内容。 如果您指定 0中,如果您想要加载,您的内容会在视图中可见后立即显示 1000px 变换 位于或高于取景口,使用 1000。 。 。 .

页:1

类型 : Number|String 默认 : offset' 值

这个 offsetVertical 选项允许您指定您想要的视图端口的上下方 开始 显示您的内容.

页:1

类型 : Number|String 默认 : offset' 值

这个 offsetHorizontal 选项允许您指定您想要的视图端口左右的距离 开始 显示您的内容.

页:1

类型 : Number|String 默认 : offsetVertical' 值

这个 offsetTop 选项允许您指定您想要在视图端口上方多远 开始 显示您的内容.

页:1

类型 : Number|String 默认 : offsetVertical' 值

这个 offsetBottom 选项允许您指定您想要在视图端口以下多远 开始 显示您的内容.

页:1

类型 : Number|String 默认 : offsetVertical' 值

这个 offsetLeft 选项允许您指定您想要的视图端口左起多远 开始 显示您的内容.

页:1

类型 : Number|String 默认 : offsetVertical' 值

这个 offsetRight 选项允许您指定您想要在视图端口右侧多远 开始 显示您的内容.

节流阀

类型 : Number|String 默认 : 250

节流阀由内部职能管理,防止性能问题持续发射 scroll 事件。 使用节流阀会在用户滚动时设置一个小的超时并保持节流,直到用户停止. 默认是 250 毫秒长.

弹跳

类型 : Boolean 默认 : true

默认情况下,节流函数实际上是一个 弹跳 函数,使检查功能仅在用户停止滚动后被触发。 要使用传统的节奏, 它只能检查每个可装入的内容 throttle 毫秒, 设定 debounce 改为 false。 。 。 .

高度

类型 : String|Number

这个 height 选项允许您设定元素的高度,即使它没有内容.

宽度

类型 : String|Number

这个 width 选项允许您设置元素的宽度,即使它没有内容.

可见

类型 Function

当内容出现在屏幕上时执行的回调功能 .

aync(实验性)

类型 boolean

表示懒惰负载内容是否以同步渲染( React a syncous primation) 的方式被挂载.

版本与发布记录

@frontity/lazyload 共发布 14 个版本,首次发布于 2018/04/25;过去 12 个月发布了 0 个版本。

版本发布日期距今
1.0.12latest2018/10/268 年前
2.0.1next2018/10/168 年前
1.0.112018/10/168 年前
2.0.02018/10/108 年前
1.0.102018/10/108 年前
1.0.92018/10/108 年前

关于 @frontity/lazyload 的常见问题

@frontity/lazyload 是什么?

React 的懒惰负载组件, 有快度

如何安装 @frontity/lazyload?

在项目目录运行 npm install @frontity/lazyload,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:react(^16.5.0)、react-dom(^16.5.0)、prop-types(^15.5.8)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。

@frontity/lazyload 支持 TypeScript 吗?

该包的 package.json 没有声明类型入口。需要类型提示时,可以在 npm 上查找社区维护的 @types/frontity__lazyload 是否存在。

@frontity/lazyload 支持 ESM 还是 CommonJS?

以 CommonJS 形式发布,可以直接 require();在 ES Module 项目中也可以用 import 引入(Node.js 会把 module.exports 作为默认导出)。

@frontity/lazyload 可以商用吗?

@frontity/lazyload 使用 MIT 许可。宽松许可:允许商业使用、修改和再分发,通常只需在分发时保留原版权与许可声明。以上为概括,不构成法律意见,请以许可原文为准。

@frontity/lazyload 的下载量有多少?

根据 npm 官方下载统计,@frontity/lazyload 在 2026/10/16 – 2026/11/14 这 30 天内被下载 2,393 次,日均约 80 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@frontity/lazyload 还在维护吗?

最新版本 1.0.12 发布于 2018/10/26(8 年前);至今共发布 14 个版本,其中过去 12 个月发布了 0 个;首次发布于 2018/04/25。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。