Nuxt.jsで画像遅延読み込みを「Vue-Lazyload」を使って実装する

画像が大量に使われているサイトは、読み込みに時間がかかってしまいます。そこで画面外の画像は読み込まず、画面内に入ってきた画像を読み込むようにします。

今回は、Nuxt.jsで「Vue-Lazyload」を使って、画像を遅延読み込み（遅延ローディング）する方法について紹介していきます！

Vue-Lazyloadを使って画像遅延読み込みを実装する

Vue-Lazyloadというプラグインを使って、画像遅延読み込みを実装していきます。

npmを使ってインストール

npm i vue-lazyload

リポジトリ：hilongjw/vue-lazyload

lazyload用のファイルを作成

src/pluginsディレクトリ配下にlazyload.jsファイルを作成します。

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

Vue.use(VueLazyload, {
  preLoad: 1.3,
  attempt: 1,
  observer: true,
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  }
})

オプションに関しては、こちらを参照。

lazyload用のファイルをnuxt.config.jsで読み込む

先ほど作成した、lazyload.jsファイルをnuxt.config.jsファイル内で読み込みます。

export default {
  plugins: [
    { src: '~/plugins/lazyload.js' }
  ]
}

参考：nuxt.config – NuxtJS

v-lazyに画像遅延読み込みをする画像のパスを指定

v-lazyに遅延読み込みをする画像のパスを指定してあげます。

<img v-lazy="require('~/assets/images/hoge.png')">

これで、実装完了です！

• UdemyでNuxt.jsを学べるおすすめの講座を厳選紹介！