Nuxtのプロジェクトで画像などのリソースに対してLazyLoadを設定してみます。
検証した環境
| 1 | nuxt | 2.14.3 |
| 2 | nuxt-lazy-load | 1.2.4 |
ライブラリの導入
NuxtでLazy Loadを実装するためのライブラリをインストールします
$ yarn add nuxt-lazy-loadnuxt.config.jsに設定
nuxt.config.jsに使用するための設定を追記します
nuxt.config.js
export default {
modules: [
'nuxt-lazy-load'
]
・・・オプションを設定する事が出来るため、オプションを設定する場合は配列で渡します
nuxt.config.js
export default {
modules: [
['nuxt-lazy-load', {
// Your options
}]
]
・・・公式のREAME見ると、これ以外にも<img>タグ等に書く設定などについて書かれていますが、
なんとこれだけでLazy Loadしてくれるようになります！
Lazy Loadされているかの確認
<img>タグに対して lazyLoad というクラスが自動で付与され、
読み込み中の場合は isLoading 、読み込みが終わると isLoaded というクラスが付与されるようになります。
これで自動的にLazy Loadされるようになります。
background imageに設定する
lazy-background を使います
<div lazy-background="~/assets/images/background-image.jpg">
Content
</div>指定の画像のみにLazy Loadを設定する
特定の画像のみをLazy Loadしたい場合はまずnuxt.config.jsで directiveOnly: true を設定します
nuxt.config.js
export default {
modules: [
[
'nuxt-lazy-load',
{
directiveOnly: true,
},
],
]
・・・そしてLazy Loadさせたい <img> に対して v-lazy-load を指定します。
<img data-src="image.png" alt="" title="" v-lazy-load />nuxt-lazy-loadの設定色々
nuxt-lazy-loadはnuxt.config.jsに色々なオプションを設定をする事が出来ます。
公式ページのREADMEをそのまま持ってくるとこのように書かれています。
nuxt.config.js
modules: [
['nuxt-lazy-load', {
// These are the default values
images: true,
videos: true,
audios: true,
iframes: true,
native: false,
polyfill: true,
directiveOnly: false,
// Default image must be in the static folder
defaultImage: '/images/default-image.jpg',
// To remove class set value to false
loadingClass: 'isLoading',
loadedClass: 'isLoaded',
appendClass: 'lazyLoad',
observerConfig: {
// See IntersectionObserver documentation
}
}]
]デフォルトで画像も設定出来るようですし、読み込み中のクラス名も変更出来たりと便利です！
参考資料
