サイト高速化のために必要な画像の遅延読み込みを実装する方法を紹介します。ぐぐってもライブラリ推しの記事しかなかったので独自実装の方法を書いておきます。

【プラグイン不要】Vue.js で 画像の遅延読み込みを実装する方法

ちなみに、実装をしたのは Vue2 系です。
まずは完成コードです。
mixin として読み込んで、あとは遅延読み込みしたいところのHTMLタグ（imgタグ）をいじるだけでおっけーですね。

LazyLoader.js

export default {
  methods: {
    displayImage: function() {
      document.querySelectorAll('img.loading').forEach((img: HTMLElement)=>{
        let dataSrc = img.getAttribute('data-src');
          if (img.getAttribute('src') === dataSrc) return;
          // 画像の要素が見えた時
          if (window.parent.screen.height - 300 > img.getBoundingClientRect().top) {
            // 画像表示処理
            img.setAttribute("src", dataSrc);
            setTimeout(()=> {
              img.classList.remove("loading")
            }, 100);
          }
      });
    }
  },
  mounted() {
    window.onscroll = function (e) {
      e.preventDefault();
      this.displayImage();
    }.bind(this);
  }
};

HTML

<img src="[ローディング画像のパス]" data-src="[遅延読み込みさせたい画像のパス]" class="loading">

コード解説

loadingというクラスが付与されたimgタグをすべて取得し、
要素が表示されたタイミングでdata-srcというカスタムデータ属性に記述されているパスがsrcタグに反映されます。
最初のsrcタグには遅延読み込み用の軽い画像を読み込ませておくことで、ローディングしているような演出ができます。
ちなみに、僕の場合は、透明の画像を読み込ませて、その背景にローディング画像を割り当てているので、2つの画像を使ってしまっていますが、サイズ的には問題なしですね。
ローディング画像のスタイルはこんな感じです。

img.loading {
    background-image: url(/assets/image/loader/oval.svg);
    background-color: #2c2c2c;
    background-repeat: no-repeat;
    -webkit-background-size: 36px 36px;
    -o-background-size: 36px 36px;
    background-size: 36px 36px;
    background-position: center center;
}

透過画像を使っているので、background-colorの値を変えるだけで背景色を変えられるのも便利ですね。
ちなみに、ローディング画像はここから拝借しました。
ローディング画像提供サイト：https://samherbert.net/svg-loaders/

まとめ｜もうライブラリ推しはやめよう

ライブラリを使ってなんでも簡単に動くようになるのは素晴らしいですけど、遅延読み込みぐらい簡単に実装できるのはなるだけ使い方のよくわからないライブラリとかインストールしたくない性分です。
自分で書いていると力もついてくるので、おすすめですよ！
以上、ライブラリを使わないVue.jsの画像遅延読み込みの実装方法でした。
ちなみに、このブログでは上記のjQuery版を利用してふわっとフェードして遅延読み込みを実現しています。気になる方はソースコードを見てみてね！