Nuxtのサイトにlazyloadを実装してブラウザで確認する方法

Nuxt.jsで作ったサイトには、以下のように書くことでlazyloadを追加できます。

<img src=”/images/example.jpg” loading=”lazy” alt=”…” />

これにより、スクロール範囲に入った際に画像が読み込まれます。

lazyloadが実際に動いているかをブラウザで確認するには、以下のようにします。

https://www.espi.tokyo/

Google Chrome デベロッパーツールの、「Network > imgフィルタ」を選択すると、ファーストビューで読み込まれている画像がリストアップされます。

スクロールしていくと、画像が読み込まれていくのがわかります。