【Vue.js】画像の遅延読み込みを実現する為にvue-lazyloadを導入してみた

実務でフロントのパフォーマンス改善を仰せつかり、
試行錯誤する中で、学習の一環で個人アプリにvue-lazyloadと言うライブラリを導入してみた。

他にもいくつかvueでLazyLoad出来るライブラリがあるので、後日そっちも試してみたい。

Lazy Load

Lazy Loadとは、画像やiframeなどコンテンツがブラウザの表示領域内に存在するものだけをロードし、領域外のコンテンツはロードしないことで、画面表示を高速化する仕組みのことです。

環境

vue.js 2.6.12
vue-lazyload 1.3.3

実装

まずはライブラリをインストールします。

$ npm install vue-lazyload -D

CDNでもOKです。

<script src=”https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

エントリーポイントでインポートして必要に応じてオプションを設定しておきます。

app.js

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: // 事前ロードする高さの割合指定
  error: //エラー時に表示する画像指定する
  loading: // ロード中に表示する画像指定する
  attempt: // ロード失敗した時のリトライの上限指定
  listenEvents: // 遅延読み込みを起動するためのイベント
  adapter: // 要素の属性を動的に切り替えたい時に使用
  filter: // 画像を動的に切り替えたい時に使用
  throttleWait: // 遅延の待機時間
})

Lazy Loadさせたいimg要素にv-lazyディレクティブ的なもので画像パスを指定するだけと簡単です。

card.vue

<li v-for="item in items" :key="item">
  <img class="card-main-img" v-lazy="item.imageUrl">
</li>

実装イメージ。
分かりづらいですが、ロード中の画像にNoImageを設定しています。