画像が大量に使われているサイトは、読み込みに時間がかかってしまいます。そこで画面外の画像は読み込まず、画面内に入ってきた画像を読み込むようにします。
今回は、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' }
]
}
v-lazyに画像遅延読み込みをする画像のパスを指定
v-lazyに遅延読み込みをする画像のパスを指定してあげます。
<img v-lazy="require('~/assets/images/hoge.png')">

これで、実装完了です!
Nuxt.js関連のおすすめUdemy講座
Nuxt.js関連のおすすめ書籍
リンク
コメント