» TechAcademyの無料体験

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

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

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

今回は、画像を遅延読み込みする方法をこの記事で書いていきます。

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')">

これで、実装完了です!

コメント

タイトルとURLをコピーしました