どうしてもページが重くなって表示が遅れてしまう事ってありますよね。
その結果、要素が一瞬ずれてしまうこともあります。
そういう場合、ローディング画面を導入してみるのはいかがでしょうか？

簡単に理解でき、コピペしやすいようシンプルにまとめてあります。

まず最初にjQueryを読み込ませておいてくださいね。

デモページは、こちら

▼html

ローディング画面とロード完了後に表示させる内容を別に囲っておきます。

    <div id="loader-bg">
        <div id="loader">
            <img src="./loading_page_files/loading.gif">
            <br>Now Loading...
        </div>
    </div>
    <div id="wrap">
        ロード完了後に表示させる内容
    </div>

▼css

cssではローディング画面をまず非表示になるようにしておきます。

#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #000;
	z-index: 1;
}
#loader {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
	text-align: center;
	color: #fff;
	z-index: 2;
}

▼jQuery

3～8行目でCSSで非表示にしたローディング画面を、ウィンドウの高さを指定して表示させています。
10～14行目で全ての読み込みが完了したら非表示にする仕組みです。

また、ページ内の一部に長時間読み込みが終了しないスクリプトや画像があった場合、ローディング画面が終わりません。
なのでローディング画面が10秒続くと、強制的にロード画面が非表示になる仕組みになっています。
これがなくても基本動作には問題ありません。
16～25行目は削っても大丈夫です。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
  var h = $(window).height();
 
  $('#wrap').css('display','none');
  $('#loader-bg ,#loader').height(h).css('display','block');
});
 
$(window).load(function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(900).fadeOut(800);
  $('#loader').delay(600).fadeOut(300);
  $('#wrap').css('display', 'block');
});
 
//10秒たったら強制的にロード画面を非表示
$(function(){
  setTimeout('stopload()',10000);
});
 
function stopload(){
  $('#wrap').css('display','block');
  $('#loader-bg').delay(900).fadeOut(800);
  $('#loader').delay(600).fadeOut(300);
}
</script>

今回、参考にさせていただいたのは、『 gimmick log 』さんです。ありがとうございます。

デモページは、こちら