今までは主にアニメーションGIFで作られていたローディング画像をCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング画像を表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。

どういうローディング画像かはこの際、問題ではないのでとりあえずmain要素以下に何かしら(サムネイルとする)をロードするまでローディング画像を表示することを考えてみる。普通はJavaScriptでローディング画像の追加→サムネイルのビルド→ローディング画像の削除→サムネイルの追加とやるわけだけど、ローディング画像の追加と削除でDOM操作を伴うのはコストがある気がする。

<main id="result">
  <div class="spinner"></div>
</main>

最初からこうしておいて、ローディング画像の表示切り替えをCSSから制御するとコストが下がりそう。

.spinner {
  /* スピナーのスタイル */
  display: none;
}

.spinner:only-child {
  display: block;
}

:only-child擬似クラスを使って表示するようにしてやり、サムネイルが追加されたりなどして唯一の子でなくなったら消してやるという仕組み。

---

実際にはこういう何かを読みこむまでローディング画像を表示するケースでは、何かしらのDOM操作を伴うので、大幅にコストが下がるということはなさそう。しかしそういったDOM操作を行うJavaScriptにローディング画像の表示切り替えを行う制御を混ぜずに済む、CSSだけで完結するというような効果はある。使いどころはありそう。