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-imageとv-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の方が軽くて良い感じ。