【下篇】你的图片加载，一点都不酷炫！不信You Look Look... 【下篇】你的图片加载，一点都不酷炫！不信Yo

【上篇】你的图片加载，一点都不酷炫！不信You Look Look...

我看对上篇文章有兴趣的同学不少，就把上篇文章中的功能针对 Vite 做了集成，基于 web components 开发，也没有技术限制，该文就简单讲一下用法，大家也可以随时交流。

在线示例

Before

After

特性

无框架限制 - 基于 Web Components
懒加载 - 基于 Intersection Observer API
模式
- Lqip - 以缩略 base64 图为过渡
- Sqip - 以 svg 轮廓为过渡，可自定义轮廓，滤镜
- Cucoloris - 以剪影为过渡，可自定义颜色，背景色
- Draw - 以动态画笔为过渡，可自定义画笔颜色
支持 - jpg，jpeg，png，gif
自定义过渡
集成
- Vite

安装

npm install magic-img

使用

// main.js
import installMagicImg from 'magic-img'
import 'magic-img/css'

installMagicImg()

// vue
<magic-img :src='img'>
// react
<magic-img src={ img }>

// magic = lqip|sqip|cucoloris|draw
import img from './home.png?magic=lqip'

// vite.config.js
import magicImg from 'magic-img/vite';

export default {
  plugins: [
    magicImg(/* options */)
  ]
}

Options

lqip
- w - 缩略图宽度 (default: 20)
- h - 缩略图高度
sqip
- numberOfPrimitives - 生成的轮廓数量 (default: 20)
- blur - 滤镜 (default: 2)
- mode - 轮廓模式 (default: 0) 0=combo, 1=triangle, 2=rect, 3=ellipse, 4=circle, 5=rotatedrect, 6=beziers, 7=rotatedellipse, 8=polygon
cucoloris
- background - 背景色 (default: '#fff')
- color - c7d4d8 (default: '#c7d4d8')
- threshold - 阈值 (default: 120)
draw
- w - 缩略图宽度 (default: 400)
- h - 缩略图高度

自定义 Options

全局定义

// vite.config.js
import magicImg from 'magic-img/vite';

export default {
  plugins: [
    magicImg({
      sqip: {
        numberOfPrimitives: 100,
        blur: 0,
      }
    })
  ]
}

局部定义

// 可针对不同图片自定义转换模式
import img from './home.png?magic=sqip&numberOfPrimitives=100&blur=0'

自定义过渡

根据不同状态你可以自定义过渡效果

migic-img dom 结构

<magic-img>
  <!-- 占位元素，可能是 img，svg -->
  <placeholder class='magic-placeholder' />
  <!-- 最终展示图片 -->
  <target class='magic-target' />
</magic-img>

过渡状态

default - 你可以默认一些样式
from - 当元素出现在视窗内，此时也会加载真正的图片 placeholder，target 会被设置属性 status=from
to - 真正的图片加载完毕 placeholder，target 会被设置属性 status=to

例子

<magic-img src='xxx' class='my-style'>

.my-style .magic-placeholder {
  filter: blur(10px)
}
.my-style .magic-target[status=from] {
  border: 1px solid;
}
.my-style .magic-target[status=to] {
  opacity: 1;
  filter: grayscale(1);
  transition: all 4s;
}

注意

在 vue 中，custom element 需要注册

Vue2

Vue.config.ignoredElements = [
  'magic-img',
]

Vue3 + Vite

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('magic-img')
        }
      }
    })
  ]
}

Vue3 + Vue-cli

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => ({
        ...options,
        compilerOptions: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: tag => tag.startsWith('magic-img')
        }
      }))
  }
}

最后

大家有什么有意思的模式，也可以加入到这个库里面，或者有什么使用上的问题，随时交流。