插件名称 | 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
下面列出了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
无法加载图像。图片未显示,占位符仍然可见。