こんにちは、”はふぃ”です。
lazyload(遅延読み込み)という言葉をご存知でしょうか?
通常は、ページにアクセスした際に全ての画像を読み込みます。しかし、lazyloadを使うと画面に表示されている領域の画像のみを読み込み、スクロールした時には画面内に入った画像を読み込んでいきます。これによって、初期描画が早くなるためサイトのパフォーマンスが向上します!
今回はこのlazyloadをVue.jsアプリケーションで行う方法について説明します。
目次
利用するプラグイン
vue-lazyloadというプラグインを利用します。
https://github.com/hilongjw/vue-lazyload
npmを使ってインストールしましょう。
$ npm i vue-lazyload -S
実装方法
まず、lazyloadをプラグインを使って読み込む設定を作ります。
< plugins/lazyload.js >
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
observer: true
})
< nuxt.config.js >
module.exports = {
plugins: [
'~/plugins/lazyload'
]
}
続いてlazyloadを使ったimgタグの実装です。
imgタグのv-lazy
に表示する画像やローディング画像をセットしたオブジェクトを渡すだけで、lazyloadが実現できます。
※ より詳しいオプションや使い方はlazyloadのgitを参考にしてください
< components/pages/sample/LazyloadPage/index.vue >
<template>
<div>
<div v-for="(n, i) in 100" :key="`lazyload-img_${i}`">
<img v-lazy="imgObj" :alt="`lazyload-img_${i}`">
</div>
</div>
</template>
<script>
import src from '~/assets/img/reiwa.png'
import loading from '~/assets/img/loading.gif'
export default {
data () {
return {
imgObj: {
src,
loading
}
}
}
}
</script>
<style scoped>
img[lazy=loaded] {
animation-duration: 2s;
animation-fill-mode: both;
animation-name: scrollIn;
}
@keyframes scrollIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
※ 表示上わかりやすくするためにanimation-duration
を2秒と長めに設定しています
結果
スクロールするとアニメーションがついて表示される(遅延読み込み)様子がわかると思います。(ローディング画像は一瞬すぎてわかりづらいですが…)

また、表示速度に関しても結果を見てみましょう!
lazyloadを実装した場合とそうではない場合で、画像を100枚読み込むページを比較すると以下のようになります。
-1024x251.png)
-1024x224.png)
上の画像の赤枠部分を見ると、lazyloadの方が初期描画までの時間が短縮されていることがわかります!
まとめ
vue-lazyloadを使うことで、簡単にlazyloadが実現でき、サイトのパフォーマンスを改善することができるので、画像が多いサイトなどは是非実装してみてください!
参考
今回のコードはgithubで公開中なので参考にしてみてください!↓
https://github.com/hafilog/vue-sample/tree/master/components/pages/sample