CSSのローディング・アイコンのコスト

今までは主にアニメーション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だけで完結するというような効果はある。使いどころはありそう。