pmage

这是一个适用于VUE3的渐进式图片加载插件！

pmage 即 Progressive Image ，它可以帮您：实现从高斯模糊的缩略图到原图的平缓过渡，改善用户体验。

原理：缩略图会被优先下载，使用户先看到一张高斯模糊的缩略图；当原图加载完成时，再平滑过渡到高清图片，这便是渐进加载。

安装

npm install pmage --save

引入

全局引入

import { createApp } from 'vue'
import App from './App.vue'

import pmage from 'pmage' // 引入pmage
import 'pmage/dist/style.css' // 引入样式文件

const app = createApp(App)

app.use(pmage, {
	blur: 10, // 模糊像素(px)，默认为10
	scale: 1.2, // 缩放倍数，默认为1.2
	time: 0.5, // 动画持续时间(s)，默认为0.5
	animation: true, // 是否启用动画，默认为true
	delay: 1000 // 延时(ms)，默认为0
});

app.mount('#app')

请注意，全局配置的属性，会被组件上的Props覆盖。

按需引入

import { pmage } from 'pmage' // 引入pmage
import 'pmage/dist/style.css' // 引入样式文件

使用

最简引用

<pmage src="https://ftp.bmp.ovh/imgs/2021/04/b3a70da0fa596920.jpeg" />

全部能力

<template>
	<pmage
		:placeholder="'https://ftp.bmp.ovh/imgs/2021/04/c7a9451f12cb70ce.jpg'"
		:src="'https://ftp.bmp.ovh/imgs/2021/04/b3a70da0fa596920.jpeg'"
		:animation="true"
		:blur="10"
		:scale="1.2"
		:time="0.5"
		:delay="2000"
		@before-load="beforeLoad"
		@onload="onload"
		@onerror="onerror"
	>
		<template #default>
			<div class="default">默认插槽</div>
		</template>
		<template #top>
			<div class="top">上层插槽</div>
		</template>
	</pmage>
</template>
	
<script setup>
import pmage from 'pmage';

const beforeLoad = (next) => {
	console.log('beforeLoad')
	next();
}

const onload = () => {
	console.log('onload')
}

const onerror = () => {
  console.log('onerror')
}
</script>

Props

属性	类型	是否必须	说明
src	string	必须	原图的src
placeholder	string	可选	占位图的src
animation	boolean	可选	是否启用动画，默认为true
blur	number	可选	模糊像素(px)，默认为10
scale	number	可选	缩放倍数，默认为1.2
time	number	可选	动画持续时间(s)，默认为0.5
delay	number	可选	延时(ms)，默认为0

placeholder 占位图建议使用原图等比缩放后的base64格式图片，来使体验最佳化。

Event

事件	参数	说明
@before-load	next()	加载前钩子，原图开始加载前触发，参数为next函数，调用next后开始加载原图
@onload	无	图片加载完成后触发
@onerror	无	图片加载失败时触发

Slot

name	说明
default	默认插槽，位于占位图与原图中间，原图加载完毕后会被覆盖，适合盛放加载动画
top	上层插槽，位于原图上方，不会被覆盖