一个适用于VUE3的渐进式图片加载插件:Pmage

16

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

之前写了一个适用于Vue2的指令式插件,可以实现类似的功能。为了适配Vue3版本的bing.mcloc.cn🔗,我又写了一个Vue3版本的组件式插件,可以实现更多的功能。

1336601288.gif

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

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

安装

npm install pmage --save

引入

全局引入

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

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')

按需引入

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"
    >
        <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')
}
</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

图片加载完成后触发

Slot

name

说明

default

默认插槽,位于占位图与原图中间,原图加载完毕后会被覆盖,适合盛放加载动画

top

上层插槽,位于原图上方,不会被覆盖