Vue.js 2 延迟加载图像组件 - vue-clazy-load

Vue.js 2 延迟加载图像组件 - vue-clazy-load
插件名称 vue-clazy-load
发布时间 2020年12月31日
插件作者 matheusgrieger

基于组件的图像惰性加载器,可对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

  • 参数:本机错误事件

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