# @egjs/imready 中文文档
规范地址：https://npmcn.com/package/%40egjs/imready/
版本：1\.4\.2
npm 元数据更新时间：2025-10-24T06:49:51.882Z
中文译文更新时间：2026-11-13T09:07:18.145Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40egjs/imready
原文对照：https://npmcn.com/package/%40egjs/imready/?lang=original
项目主页：https://github.com/naver/egjs-imready#readme
源码仓库：https://github.com/naver/egjs-imready
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：387 kB，29 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2020-11-24T03:04:22.134Z
- 最新版本发布：2025-05-20T05:47:17.219Z
- 近 30 天下载量：269144（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 0 个）
## 中文简介
此模块用于等待图像或视频准备.
## 安装
```sh
npm install @egjs/imready
```
也可以使用：`pnpm add @egjs/imready`、`yarn add @egjs/imready`、`bun add @egjs/imready`
## README
## 我准备好了
[](https://www.npmjs.com/package/@egjs/imready)  [](https://github.com/naver/egjs-imready/actions/workflows/run-unit.yml) [](https://coveralls.io/github/naver/egjs-imready?branch=main&style=flat-square) [](https://github.com/naver/egjs-imready/blob/main/LICENSE) [](https://github.com/naver/egjs-imready/tree/main/packages/react-imready) [](https://github.com/naver/egjs-imready/tree/main/packages/vue-imready) [](https://github.com/naver/egjs-imready/tree/main/packages/vue2-imready) [](https://github.com/naver/egjs-imready/tree/main/packages/ngx-imready) [](https://github.com/naver/egjs-imready/tree/main/packages/svelte-imready)
我准备好检查图像或视频是否装满了!
[**演示**](https://naver.github.io/egjs-imready) 编号 : [**API 密码**](https://naver.github.io/egjs-imready/release/latest/doc/)
## 特征
- 请检查access-date=中的日期值 (帮助) 容器中的所有图像和视频都装入.
- 如果提前知道图像或视频的大小,可以跳过加载并自动调整宽度和高度,直到实际加载完成.
- 支持原生懒惰加载.
## 文档
- [启动和演示](https://naver.github.io/egjs-imready/)
- [API 文档](https://naver.github.io/egjs-imready/release/latest/doc/)
## 下载和安装
从 repo 直接下载 dist 文件或通过 npm 安装它 .
```bash
$ npm install @egjs/imready
```
```html
```
## 如何使用
```js
import ImReady from "@egjs/imready";
const im = new ImReady().on("preReady", () => {
// I'm pre-ready
}).on("ready", () => {
// I'm ready
});
// check element
im.check([element]);
```
- 当 `loading="lazy"` 或者说 `data-lazy="true"`(外部懒惰加载)属性被使用 `preReadyElement`(hasLoading=real) 事件发生,大小为 0. 当装入完成时 `readyElement`(hasLoading= true) 事件发生,你可以得到大小.
```html
![]()
```
- 如果您使用 `data-width` 财务报告和审定财务报表 `data-height` 属性、自我大小、子图像和视频元素自动调整,直到装入完成.
```html
```
- 如果您使用 `data-skip="true"` 属性,即使存在图像本身和孩子图像,以及视频元素,也可以省略.
```html
```
### 活动
- **预读**: 当元素预先准备( 当大小已知时) 发生事件
- **预读**: 当所有元素都准备就绪时( 当大小已知时) 发生事件
- **准备中**: 当所有元素都准备好时发生事件
- **准备**: 当所有元素都准备好时发生事件
### 事件顺序
- 如果没有数据大小属性或加载属性
(准备准备) x N + **预读** => **准备**
- 如果有数据大小属性或加载属性
预备准备 预备准备 预备准备 预备准备 **预读** => 准备中Element( is PreReady Over: true) x N QQ **准备**
## 支持的浏览器
以下为所支持的浏览器.
| Internet 浏览器 | 颜色 | 火花 | 萨法里 | iOS系统 | 机器人 |
| --- | --- | --- | --- | --- | --- |
| 9+( 填充 8+) | 最新 | 最新 | 最新 | 7个+ | 4+(填充2.2+) |
### **如果您想要在更低的版本浏览器中使用, 请使用多填充 .**
- Array. prototype. for Each
- Array.prototype.map (英语)
- 阵列 原型 一些
- 阵列 原型 过滤器
## 如何开始开发egjs-imady?
任何有意开发egjs-imready的人,请遵循以下指示.
### 发展环境
#### 1\. 清除储存库
将egjs-imready寄存器克隆并安装依赖模块.
```bash
# Clone the repository.
$ git clone https://github.com/naver/egjs-imready.git
```
#### 2\. 安装依赖关系
```
# Install the dependency modules.
$ npm install
```
#### 3\. 建设
使用 npm 脚本来构建 eg. 准备
```bash
# Run webpack-dev-server for development
$ npm start
# Build
$ npm run build
# Generate jsdoc
$ npm run jsdoc
```
完整的构建完成后将创建两个文件夹 .
- **数字** 文件夹:包括 **已经准备好了,js** 财务报告和审定财务报表 **准备就绪。 min.js** 文档.
- **医生** 文件夹:包括 API 文档。 文件的主页是: **文件/索引.html**。 。 。 .
### 线性
为了保持同样的代码风格,我们采用了 [ESLint 语录](http://eslint.org/) 保持我们的代码质量。 这个 [规则](https://github.com/naver/eslint-config-naver/tree/main/rules) 已根据 [Airbnb JavaScript 样式指南](https://github.com/airbnb/javascript)。 。 。 . 设置您的编辑器以检查或运行到命令下方的 Linting .
```bash
$ npm run lint
```
### 测试
一旦您创建了分支并完成了开发, 您必须进行测试运行 `npm test` 命令,然后将代码推入远程仓库.
```bash
$ npm run test
```
运行 `npm test` 命令将开始 [摩诃迦叶](https://mochajs.org/) 通过测试 [卡玛跑者](https://karma-runner.github.io/)。 。 。 .
## 错误报告
如果你发现虫子,请向我们报告 打开一个新的 [问题](https://github.com/naver/egjs-imready/issues) (原始内容存档于2018-09-29). on GitHub.
## 许可证
egjs-imready 现根据 [麻省理工学院许可证](http://naver.github.io/egjs/license.txt)。 。 。 .
```
Copyright (c) 2020-present NAVER Corp.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```
## 常见问题
### @egjs/imready 是什么？
此模块用于等待图像或视频准备\.
### 如何安装 @egjs/imready？
在项目目录运行 npm install @egjs/imready，或使用 pnpm add / yarn add / bun add。
### @egjs/imready 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @egjs/imready 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @egjs/imready 可以商用吗？
@egjs/imready 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @egjs/imready 的下载量有多少？
根据 npm 官方下载统计，@egjs/imready 在 2026/10/13 – 2026/11/11 这 30 天内被下载 269,144 次，日均约 8,971 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @egjs/imready 还在维护吗？
最新版本 1\.4\.2 发布于 2025/05/20（1\.5 年前）；至今共发布 14 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/11/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。