[Nuxt]vue-lazyloadを使って画像の遅延読み込みを実現する

Webサービスの読み込みスピードはユーザーの離脱率を減らすために大事ですよね!

そこで、今回はNuxt.js(Vue.js)で画像の遅延読み込みを実装する方法をシェアします。

記事はNuxtでの使い方に焦点を当ててます。

導入

それでは、Nuxtのプロジェクトにvue-lazyloadをインストールしてみましょう。

$ npm i vue-lazyload --save

次にNuxt.jsで使えるようにplugins/vue-lazyload.jsを作成しましょう。

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
    lazyComponent: true
});

nuxt.config.jsに登録してグローバルに使えるようにしましょう。

plugins: [
  { src: '~plugins/vue-lazyload', ssr: false },
],

それでは画像の遅延読み込みを実装してみましょう。

実装

pages/index.vueに記述していきます。ちなみに画像はassets/以下に入れてます。

<no-ssr>
  <lazy-component>
    <figure class="image is-128x128">
      <img class="is-rounded kakomi" src="~/assets/icon.png">
    </figure>
  </lazy-component>
</no-ssr>

これで遅延読み込みが実装できています!実際に読み込んでみましょう。少し遅れて画像は読み込まれると思います。 ちなみに<no-ssr/>は忘れないようにつけておいてください。SSRには対応してないようで。