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

カスタマイズ

2018/07/27 2020/04/19 0

vanillaice (Akira)

Instruction Tips HTML CSS Lazyloading Lazysizes 高速化上級者向け

lazyloadingは画像が表示されるタイミングが遅くなるわけですから、せっかちスクロールをされると画像の存在に気づいてもらえないかもしれないよね。
ということでこれまでにいくつか対策を書いてきました。

本記事は以下のリンク先記事双方の内容を実践している方に向けたtipsです。

Lazyloadingでページ内スクロールの到達位置がずれる件を解消する方法 - カスタマイズ

正直あんまりおすすめではない (´・ω・｀) すすめない理由は要素が増えるめんどくさい記事内でstyle属性あるいはstyle要素を必ず使う必要がある pタグ内の画像はどうする(セマンティクス面) こんなところでしょうか。特に要素が増えてしまう点ですね。無駄なラッパーが増えるというか。 ...

Lazy loadingにLQIP画像を利用してユーザービリティを高める - カスタマイズ

FC2ブログでLazysizesを利用していることを前提とした記事です。画像のLazyloadingではオリジナル画像が出てくるまで閲覧者が画像の存在に気づかない場合があります。初期表示にLQIP(Low Quality Image Placeholder, ロークオリティイメージプレイスホルダー)を設定しておくと、その問題点を緩和することができます。...

スクロールずれを解消しつつ、LQIPで画像に気づいてもらいましょう、ということですね。
ただLQIP画像を作成するのはとても面倒です。できればやりたくない。
そんな方はローディングスピナーを表示しておくと良いと思います。

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

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

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

先回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;
}

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

Instruction Tips HTML CSS Lazyloading Lazysizes 高速化上級者向け