CSSのローディング・アイコンのコスト - Weblog - Hail2u.net
hail2uの長嶋さんによる、「ローディング表示する時はJSでDOM操作するけど、コスト高いからCSSで何とかしようよ」という提案。
デモでは、対象となる要素に、ローディングアイコンを描画する為の要素(「spinner」クラスのdiv要素)を含ませておいて、「:only-child」擬似クラスで表示非表示を切り替えるという手法。
しかし、これだとロード対象を読み込んだ後もローディング表示用の要素が無駄に残ってしまうのでイマイチ美しくないように思える。
中嶋さんの奴の、ロード完了前の読み込み先ノードの様子がこうで……
<section id="test">
<div class="spinner">
((略))
</div>
</section>完了後がこう。
<section id="test">
<div class="spinner">
((略))
</div>
<p>ローディング画像はこの文章が表示されると自動的に消えます。</p>
</section>「:empty」擬似クラス使ったらどうやろか。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Spinner; :empty version</title>
<style type="text/css">
.use-loading-symbol:empty::before {
content: "読込中……";
}
</style>
</head>
<body>
<h1>テスト</h1>
<div class="use-loading-symbol" id="target"></div>
<script>
window.setTimeout(function() {
// 実際には、ここでリソースの読み込みを行う
var e = document.getElementById('target').appendChild(document.createElement('p'));
e.textContent = 'ローディング表示はこの文章が表示されると自動的に消えます。';
}, 5000);
</script>
</body>
</html>実際に動かしてみた例は此処。
……長嶋さんのデモはアニメーションしてて洒落てるけど、CSSのアニメーションわからんちんなのでさせてない。
装飾用の無駄な要素を入れない関係上、あまり凝った表示には出来ないかな……「CSS3では1要素辺り複数の『::before』『::after』が使える」という話を小耳に挟んだ記憶が有るが、Firefox(29.0.1)でもChromium(34.0.1874.116)でもエラーになるし、W3Cの「Selectors Level 3」規格文書にもそれらしい記述はないし、削除でもされたのかな。もしも、将来、複数の「::before」「::after」が使えるような規格になれば、複雑な事も出来そう。
しかし、実際の所、本当にDOMよりCSSでの方が早いんだろうか。表示の複雑さに依存しそうな気がするけれど。上記のような、テキストだけの例ならCSSの方が早そうな気がする(余り意味ないので測定してない)。ローディング表示なんて千差万別だから、測定しても「確実にこっちの方が早い」と言えそうにないのがアレだな。
