ローディング画面もしくは読み込み中であることを示すグラフィックを表示するというのはとても大事なことです。
特にスピードを求められる昨今は「停止」していると見られる状態はよくありません。
仮に本当に「停止」している状態であったとしても「動いている」ことや「順番待ち」であるような表示をする必要があります。
JQueryを使う単純なものですがよく使うので載せてみます。
まずはHTMLに記述する部分
<div id="loading"><img src="loading.gif"></div>
<div id="container">
ここにはたくさんの画像や処理に時間のかかるものが入ります
</div>
containerはbody部分を全てひっくるめてもいいですし、重い画像や処理部分を囲ってもいいと思います。
次にloading画像の表示位置を画面の中央に表示するようにします。
それと同時に最初はcontainer部分を非表示にするように指定します。
#container
{
display:none;
}
#loading
{
position:absolute;
left:50%;
top:40%;
margin-left:-30px;
}
こうすることでloading画像が画面の中央に表示されるようになり、読み込み時はcontainer部分は見えない状態となります。
次にJQuery部分は
window.onload = function(){
$(function()
{
$("#loading").fadeOut();
$("#container").fadeIn();
});
}
となります。
これは単純にwindowが読み込まれているときに処理中と処理後でloading画像とcontainer部分の表示の切り替えを行っているだけです。
containerが読み込み中はloading画像を表示し、読み込みが終わるとloading画像をフェードアウトさせ、container部分をフェードインさせて表示させます。
上記のJQueryを挿入するのはcontainer部分より上であるほうが良いかもしれません。
HTML自体は上から実行されていくので読み込まれるタイミングによっては一瞬表示されたりといったことを防げるかもしれません。
待ち時間が発生しない部分であっても入れておくと、予想外の負荷なんかで重くなったりネットワークの断線時にユーザーのストレスを多少なりとも緩和することになるのではないかと思います。
loading画像については自動生成してくれるサービスなんかが各所にあるのでGoogle先生にお尋ねください。
JQuery
