JavaScript でロード時にコンテンツの再描画が発生しても初期状態がちら見えしないようにする方法 (HTML5 的には valid だぜ)

どうもこんにちは。

ページをロードする際に JavaScript でコンテンツの再描画が発生するような処理を行う場合、IE など一部のブラウザではスクリプト実行前の状態が一瞬表示されてから再描画される場合があります。

これって結構カッコ悪いのでどうにか出来ないか試行錯誤してみたところ、いい感じの方法が見つかったのでご紹介します。


HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample</title>
<!-- 初期状態は非表示 -->
<style type="text/css">body { visibility: hidden; }</style>
<noscript>
<!-- スクリプトが無効な場合は以下の指定がカスケードされる -->
<style type="text/css">body { visibility: visible; }</style>
</noscript>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(function($) {
	//
	// DOM の再描画が発生する処理
	//

	// スクリプトから表示状態を指定する
	$("body").css({ visibility: "visible" });
});
</script>
</head>
<body>
<h1>Sample</h1>
</body>
</html>

ポイント

毎度のことながら jQuery を使っていますが、ポイントは以下のとおり。

  1. body の初期状態を visibility: hidden にする
  2. script でコンテンツの操作終了後に bodyvisibility: visible に変更する
  3. JavaScript を無効にしているユーザ向けに noscript 内で visibility: visible に設定する
    • これがないと 2 が実行されないため何も表示されなくなってしまいます

残念なところ

XHTML では head 内に noscript を置くことが出来ないので invalid になってしまいます。一方 HTML5 では (今のところ) head 内の noscript には link, style, meta を格納しても良いことになっているのでこの方法が使えます。(上記コードは HTML5 Validator をきちんとパスします。) 実用志向と言われるだけありますね!

情報

preload preload preload