nuxtjsにlazysizesをインストールして画像遅延ローディングを行う

はじめに

• 下記のプラグインを利用してnuxtjsにインストールして利用する github.com

• nuxtjs用のプラグインがあったがスターの数が少ないため、lazysizesをインストールする github.com

インストール

• 下記のコマンドでインストールを行う

 yarn add lazysizes

pages/index.vueに設定

• スクリプトはインポートするだけ

<script>
(省略)
import 'lazysizes'
(省略)
</ script>

• 下記のように表示していた画像に対して

 <img src="@/assets/images/hogehoge.png" class="hogehoge">

• 下記のようにclassにlazyloadを指定し、data-src属性に画像のパスを指定するだけ。
• 画像のパスを@/assets/images/hogehoge.pngや~/assets/images/hogehige.pngで指定したらエラーになってしまったため、publicフォルダに画像を配置して試したところ、画像遅延ローディングを行うことができた

<img class="hogehoge lazyload" data-sizes="auto" data-src="http://localhost/hogehoge.png">

パフォーマンス

• 画像遅延ローディングする前

• 画像遅延ローディングした後

約100ms早くなったので、画像遅延ローディングは実装した方が良いかも。

画像遅延ローディングがときにして邪魔になるケースがある場合

• ページ内リンクなど、ある条件によっては遅延ローディングが邪魔になる場合があるがある。その場合、ある条件になったら、画像遅延ローディングのクラスを削除して画像のパスをsrc属性に設定してあげることで通常の画像表示処理に戻すことができる。

          const imgs = document.querySelectorAll("img");
          Array.from(imgs).forEach((img) => {
            img.classList.remove("lazyload");
            if (img.dataset.src) {
              img.src = img.dataset.src;
              img.dataset.src = "";
            }
          });