v-progressive-image
v1.1.3
Published
适用于vue3的渐进式图片加载插件
Downloads
27
Readme
v-progressive-image
这是一个适用于vue3的渐进式图片加载插件!
只需在原标签上添加两行自定义指令,即可实现图片的平滑过渡。
效果
简介
v-progressive-image 是vue3的指令插件,通过两个指令,即可实现图片渐进加载功能。
v-progressive-image 可以帮您:实现从高斯模糊的缩略图到原图的平缓过渡,改善用户体验。
原理: v-preview
指定的缩略图会被优先下载,使用户先看到一张高斯模糊的缩略图;当原图加载完成时,再平滑过渡到高清图片,这便是渐进加载。
安装插件
npm i v-progressive-image
全局引入插件
import vProgressiveImage from 'v-progressive-image';
app.use(vProgressiveImage, {
removePreview: false, // 大图加载完成后是否删除较小的预览图(删除会进行DOM操作) 默认false
animation: true, // 是否启用过渡动画 默认true
scale: 1.2, // 过渡动画放大倍数 必须>=1 默认为1.2 (仅在animation不为false时生效,1.0.0及之后的版本支持)
time: 0.5, // 过渡动画时间(单位:秒) 默认0.5 (仅在animation不为false时生效,1.1.0及之后的版本支持)
blur: 20 // 模糊像素(单位:px) 默认20 (仅在animation不为false时生效,1.1.0及之后的版本支持)
});
注意:(适用于旧版本)
v-progressive-image 的
0.1.0
和0.1.1
版本需要引入样式文件:import 'v-progressive-image/lib/index.css'; // 0.1.0 和 0.1.1 版本需要引入样式文件
1.0.0
及之后的版本无需引入
使用
<div
v-preview="'https://ftp.bmp.ovh/imgs/2021/04/c7a9451f12cb70ce.jpg'"
v-origin="'https://ftp.bmp.ovh/imgs/2021/04/b3a70da0fa596920.jpeg'"
>
</div>
- 使用
v-preview
指定预览图(较小的图片)链接,使用v-origin
指定原图链接。 - div标签中间不可以有内容。
- 预览图建议使用Base64编码。
- 支持在任何常规标签上使用,但在非块级元素上使用可能会有意料之外的结果,如模糊范围超过父元素。