Vueで画像を遅延読み込みするライブラリ v-lazy-image

先日書いた表示速度改善の続きで、画像の遅延読み込みをするために、ライブラリを探してみたところ、v-lazy-imageが良い感じだったので紹介。


導入

$ npm install v-lazy-image --save


使い方

App.vueとかでプラグインとして読み込む場合

import Vue from "vue";

import { VLazyImagePlugin } from "v-lazy-image";

Vue.use(VLazyImagePlugin);

必要な箇所で個別に使う場合

import VLazyImage from "v-lazy-image";

export default {
components: {
VLazyImage
}
};

あとは公式にある通り、v-lazy-imageタグを使ってやれば良い。


<template>
<v-lazy-image src="http://lorempixel.com/400/200/" />
</template>

もちろん、propsやdataの値を渡すこともできる。


<template>
<v-lazy-image :src="imageURL" />
</template>

<script>
import VLazyImage from "v-lazy-image";
export default {
components: {
VLazyImage
},
props: {
imageURL: {
type: String,
default: null
}
}
}
</script>

あとは、出力されるimgタグにv-lazy-imagev-lazy-image-loadedのclassが付与されるので、こんな感じでアニメーションをつけることができる。


<style scoped>
.v-lazy-image {
filter: blur(10px);
transition: filter 0.7s;
}
.v-lazy-image-loaded {
filter: blur(0);
}
</style>

最初はvue-lazyloadを使おうかと思ってたけど、画像の遅延読み込みのためだけならv-lazy-imageの方が軽くて良い感じ。