基于组件的图像惰性加载器，可对Vue.js 2进行深度自定义，过渡和优化。

还有很多其他的惰性加载器，但是它们都是基于指令的。Clazy Load是基于组件的，这意味着您可以将其他组件用作预加载器或加载消息，例如Vuetify和KeenUI等组件工具包中的微调框，以及加载状态和加载状态之间的转换。使用其他库是不可能的。

此项目也是轻量级的（压缩后<800字节），并使用最新的Web API以获得最佳性能。

安装

使用npm或yarn安装：

npm install vue-clazy-load
yarn add vue-clazy-load

Props

下面列出了Clazy Load支持的所有Props及其类型和说明。

src

• 类型：字符串
• 默认值：无
• 需要

要加载的图像源。必须与您的<img>标签src相匹配。

tag

• 类型：字符串
• 默认： "div"

组件应呈现给什么标签。

element

• 类型：字符串
• 默认： null

Intersecion Observer根元素的选择器。保留空白/空可使用viewport。

threshold

• 类型：数组| 数
• 默认： [0, 0.5, 1]

交叉口观察者的阈值选项的值。

ratio

• 类型：数字
• 默认： 0.4

触发加载所需元素可见的百分比。必须为> 0且<= 1。

margin

• 类型：字符串
• 默认： "0px"

交叉口观察员的边距选项。

您可以在MDN上阅读更多有关每个Intersection Observer专用道具及其功能的信息。

crossorigin

• 类型：字符串
• 默认： null
• 有效选项："anonymous"|"use-credentials"

设置图像的crossOrigin选项，并允许加载外部图像。对于服务人员和缓存很有用。

loadedClass

• 类型：字符串
• 默认： "loaded"

loadingClass

• 类型：字符串
• 默认： "loading"

errorClass

• 类型：字符串
• 默认： null

所有类都添加到根元素，而不是图像本身。

事件

loading

图像开始加载并且占位符可见。

load

• 参数：本机加载事件

图片加载完成，现在可见。

error

• 参数：本机错误事件

无法加载图像。图片未显示，占位符仍然可见。

---

官网：https://github.com/matheusgrieger/vue-clazy-load

演示：https://www.vue365.cn/code_demo.php?id=3713

GitHub下载：https://github.com/matheusgrieger/vue-clazy-load/archive/master.zip