lazy loadingで画像が出る前にローディングスピナーを表示させる方法

ローディングスピナーの役割

ローディングスピナーというのはこういうのです。

サンプルなので大きくしていますが実際はもっと小さくします。
汎く使われていますのでユーザーはこれを見ると「読み込み中か…」と直感的に理解することができます。

先回LQIPの使い方を記しましたが、lazyloadingと抱き合せの実装なので、LQIP自体もlazyloadingなんですね。
なので結局スクロール速度によってはあまり効果が無いかもしれません。

そこで今回はlazyloadingとは別でスピナーを表示させるようにします。
ページ読み込み時に即描画なのでスクロールが発生していなくても表示されます。
スピナーを画像にしてしまうと画像のlazyloadingの意味が無いので、ピュアCSSでの実装です。
LQIPとの併用も可。

スピナーCSS

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid rgb(204,204,204);
  border-top-color: rgb(51,51,51);
  animation: spinner .7s linear infinite;
}

簡単な内容ですのでカスタマイズも比較的容易だと思います。
サイズを変更する場合は width と height を同じ数値にしてください。
そして指定した数値を2で割った数をネガティブ(マイナス)値で margin-top と margin-left に指定します。
円の色はデフォルトで rgb(204,204,204)、円に沿って移動する色は rgb(51,51,51) にしてあります。お好きな色に変更してください。
短い内容なので外部ファイル化は避け、スタイルシートの方に追加を。

回線などの状況にもよりますが、スピナーは一瞬表示されるだけで本来は「スピナーが出ていることに気づかない」のが理想です。そういった意味でデザインに凝る必要はあまり無いかな、と思います。

使い方

スクロールずれ解消(事前アスペクト比指定)を行っている ことを前提とした内容なのでご注意ください。
使用したい要素にクラス名 spinner を追加します。
追加対象する要素は、.aspect-box がついているのと同じ要素、そして画像タイルをご利用の場合には .box がついているのと同じ要素に指定します。
こんな感じですね ↓

<div style="max-width: 横px;">
  <div class="aspect-box spinner" style="padding-top: calc(縦 / 横 * 100%);">
    <img class="lazyload" src="" data-src="" alt="">
  </div>
</div>

<div class="imgBox">
  <div class="box spinner">
   <img class="lazyload" src="" data-src="" alt="">
  </div>
  <div class="box spinner">
   <img class="lazyload" src="" data-src="" alt="">
  </div>
  .
  .
  .
  .
</div>

過去記事にクラス名を追加するのは辛い、という方はこちらのCSSを。

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.aspect-box::after,
.box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid rgb(204,204,204);
  border-top-color: rgb(51,51,51);
  animation: spinner .7s linear infinite;
}

付けなくない場面でも表示されてしまうことを念頭に。