jQueryでhtmlの簡易ローディング画面をつくる
大きな画像を多用していたり、パララックスサイトなどで1ページあたりの容量が大きくなった場合、通信回線にもよりますが全ての画像とソースコードの読み込みが完了するまで結構な時間がかかったりします。
読み込み中の間は画像が順次表示されていって美しくなかったり、不具合が起きたり、訪問者がイライラして離脱に繋がったり…いろいろ不都合があります。
これを解消するために、ページを読み込み中の間はローディング画面を表示し、読み込み完了後にコンテンツを表示する方法をとります。
イメージとしては、読み込み中は上記の画像のようにコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にするイメージです。
ソースコードは左から右へ、上から下へと読まれていくので、ソースコードを書く位置にも注意しましょう。
ソースコードと画像が「全て読み込まれた」というイベントは、javascriptのwindow.onloadで取得できますが、今回はjQueryを利用した書き方になっています。
【html】
<body> <div id="loader"><img src="./img/loader.gif" width="XXXX" height="XXXX" alt="Loading..." /></div> <div id="fade"></div> <div id="container"> ・・・コンテンツが入ります・・・ </div><!-- /container --> </body>
bodyタグのすぐ下に、読み込みが完了するまで先に表示する要素「div#loader」と「div#fade」を記述。div#loaderにはローディングを表すアニメーションgifを入れ、div#fadeは空divになっています。
【css】
#loader {
width: XXXXpx;
height: XXXXpx;
display: none;
position: fixed;
_position: absolute; /* IE6対策 */
top: 50%;
left: 50%;
margin-top: -XXpx; /* heightの半分のマイナス値 */
margin-left: -XXXpx; /* widthの半分のマイナス値 */
z-index: 100;
}
#fade {
width: 100%;
height: 100%;
display: none;
background-color: #FFFFFF;
position: absolute;
top: 0px;
left: 0px;
z-index: 50;
}
div#loaderはウィンドウの上下左右中央に配置しています。
ポイントは、div#loaderとdiv#fadeのdisplay値を「none」にして非表示にしておくこと。これはjavascriptをオフにしている人をケアするためで、詳しくは後述します。
【js】
$('head').append(
'<style type="text/css">#container { display: none; } #fade, #loader { display: block; }</style>'
);
jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
var pageH = $("#container").height();
$("#fade").css("height", pageH).delay(900).fadeOut(800);
$("#loader").delay(600).fadeOut(300);
$("#container").css("display", "block");
});
1つ目のポイントは、1行目。
最初に先ほどcssで設定した、div#loaderとdiv#fadeのdisplay値を「block」として表示させます。
この指定を直接cssには書かずに、わざわざjavascriptを使ってhtmlのheadタグ内にここで追加しているのは、javascriptをオフにしている人がコンテンツを見れなくなってしまうのを防ぐためです。そのため、cssでは初期値を「none」としておき、すぐに後からjavascriptで書き換えています。また、逆にコンテンツであるdiv#containerを非表示にしています。
2つ目のポイントは、5行目。
通常jQueryを利用する場合の基本構文として、htmlが読み込まれたときに実行するように$(function(){ … });とし、その内側に命令を書いていくと思いますが、これはソースコードを読み込んだ時点で実行されてしまうので、画像の読み込みは待ってくれません。なのでwindow.onloadとなるように、このように記述しています。
全ての要素が読み込まれた後の処理は、
まず目隠しレイヤーのdiv#fadeの高さをコンテンツと同じにした後、8～10行目でフェードアウトアニメーション、及びコンテンツの表示をおこなっています。
参考: kojilow Blog | ページ遷移時にフェードイン・フェードアウト
参考: javascriptで擬似的にローディング画面を実装してみた | ALOG | THE AGE
[...] ■ローディング jQueryでhtmlの簡易ローディング画面をつくる [...]
[...] こんだけ淡々と書きましたが、実は以下のサイトに全部乗ってます。 jQueryでhtmlの簡易ローディング画面をつくる こちらではgif画像をダウンロードできるサイトもまとめています！ HTML [...]
参考になってとても助かりました！
一つだけ、GoogleMapをiframeで配置しているページだけ、ローディングが邪魔をしてGooglemapの表示がうまくいかない状態です。
ローディングのスクリプトを読み込むのをやめれば、mapの表示はうまく行くんですが・・・
何かうまい方法ありませんでしょうか？