2014年05月21日

CSSでローディング表示

CSSのローディング・アイコンのコスト - Weblog - Hail2u.net

hail2uの長嶋さんによる、「ローディング表示する時はJSDOM操作するけど、コスト高いから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の方が早そうな気がする(余り意味ないので測定してない)。ローディング表示なんて千差万別だから、測定しても「確実にこっちの方が早い」と言えそうにないのがアレだな。

タグ:CSS_3 CSS UI
posted by 天井冴太 at 21:00 | Comment(0) | TrackBack(0) | Other | このブログの読者になる | 更新情報をチェックする
投票お願いします 人気blogランキング - 投票する
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

コメント欄右下をドラッグ&ドロップすると、コメント欄の拡大縮小が出来ます。
認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/397507926

この記事へのトラックバック