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

今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin

[megazalrock]

boxの背景にローディングのアイコンを指定しておくのはだめなんですかね。

[AmaiSaeta]

CSSでローディング表示 http://agpg.seesaa.net/article/397507926.html

[bleu-bleut]

only-child擬似属性でローディングアイコンを表示、非表示するアイデア。

[sigta]

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

[stakaya]

なるほど、これは使えるところあるかも。

[Qurage]

loading indicator icon

[riocampos]

『サムネイルが追加されて唯一の子でなくなったら消してやる』上手いね。

[takexi]

ローディングアニメーションの簡単なやり方

[Sips]

CSS

[puzzeljp]

“only-child”

[glat_design]

なんかでつかってみたい /