我准备好了
我准备好检查图像或视频是否装满了!
特征
- 请检查access-date=中的日期值 (帮助) 容器中的所有图像和视频都装入.
- 如果提前知道图像或视频的大小,可以跳过加载并自动调整宽度和高度,直到实际加载完成.
- 支持原生懒惰加载.
文档
下载和安装
从 repo 直接下载 dist 文件或通过 npm 安装它 .
$ npm install @egjs/imready
<script src="//naver.github.io/egjs-imready/release/latest/dist/imready.min.js"></script>
如何使用
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) 事件发生,你可以得到大小.
<img src="..." />
<img src="..." />
<img src="..." loading="lazy" />
<img data-lazy="true" />
- 如果您使用
data-width财务报告和审定财务报表data-height属性、自我大小、子图像和视频元素自动调整,直到装入完成.
<div data-width="100" data-height="100">
<img src="..." />
<img src="..." />
<img src="..." />
</div>
- 如果您使用
data-skip="true"属性,即使存在图像本身和孩子图像,以及视频元素,也可以省略.
<div data-skip="true">
<img src="..." />
<img src="..." />
<img src="..." />
</div>
活动
- 预读: 当元素预先准备( 当大小已知时) 发生事件
- 预读: 当所有元素都准备就绪时( 当大小已知时) 发生事件
- 准备中: 当所有元素都准备好时发生事件
- 准备: 当所有元素都准备好时发生事件
事件顺序
- 如果没有数据大小属性或加载属性
(准备准备) 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寄存器克隆并安装依赖模块.
# Clone the repository.
$ git clone https://github.com/naver/egjs-imready.git
2. 安装依赖关系
# Install the dependency modules.
$ npm install
3. 建设
使用 npm 脚本来构建 eg. 准备
# Run webpack-dev-server for development
$ npm start
# Build
$ npm run build
# Generate jsdoc
$ npm run jsdoc
完整的构建完成后将创建两个文件夹 .
- 数字 文件夹:包括 已经准备好了,js 财务报告和审定财务报表 准备就绪。 min.js 文档.
- 医生 文件夹:包括 API 文档。 文件的主页是: 文件/索引.html。 。 。 .
线性
为了保持同样的代码风格,我们采用了 ESLint 语录 保持我们的代码质量。 这个 规则 已根据 Airbnb JavaScript 样式指南。 。 。 . 设置您的编辑器以检查或运行到命令下方的 Linting .
$ npm run lint
测试
一旦您创建了分支并完成了开发, 您必须进行测试运行 npm test 命令,然后将代码推入远程仓库.
$ npm run test
运行 npm test 命令将开始 摩诃迦叶 通过测试 卡玛跑者。 。 。 .
错误报告
如果你发现虫子,请向我们报告 打开一个新的 问题 (原始内容存档于2018-09-29). on GitHub.
许可证
egjs-imready 现根据 麻省理工学院许可证。 。 。 .
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.