ジャバスクリプトで動きのある動作を組み込んでいたり、動画や静止画などの重い画像を配置していると、HTML(DOM) を完全に読み込むまでに意図しない動きを起こすことがある。

そこで、HTML(DOM)を読み込むまでは、本体部分を非表示、それまではローディング画像を表示するようにする。

作りとしては単純で、読み込んでから表示したい部分をCSSで非表示にしておき、ジャバスクリプトの window.onload で後にCSSを表示させる方法で行った。

下記の方法では、切り替わることを分かりやすくするために、2秒後に切り替わるようにした。

また、本体部分を非表示→表示にした際に意図しない動きをする場合は、透過を0にしておいて、読み込みが終わってから、透過を100に戻す方法だとうまくいくこともある

CSS

//ローディング画面用のスタイル
#load{
	width: 100%;
	text-align: center;
	display: block;
}

//本体用のスタイル
#wrapper{
	width: 100%;
	text-align: center;
	display: none;
}

javascript

	window.onload = function () {
		//切り替えがわかるように2秒後にtestを実行するようにする
		setTimeout('test()', 2000);		
	}
	
	function test(){
		//ここでローディング画像を表示していたDIVを非表示にする
		document.getElementById('load').style.display = 'none';
		
		//ここで本体を表示にさせる
		document.getElementById('wrapper').style.display = 'block';	
	}
	

【 DEMO 】