【JQuery】ローディング画面の設置
画像や動画などの容量が重いコンテンツをページに埋め込んでいる場合などでは、ページが表示正常にされるまでに時間がかかる場合があります。その影響でページが表示正常されるまでレイアウトが崩れた状態でページを見せておくことはなるべく避けたいので、ページが全て読み込まれるまでローディング画面を表示するようにする方法をご紹介します。
htmlにローディング画像が表示される領域を作成
ローディング画面が表示されるボックス「id=”loader”」と「id=”fade”」のdivをbodyの直ぐ下に設置します。「id=”loader”」の中にローディング画像が入り、「id=”fade”」はコンテンツエリアを隠す目隠しボックスになります。
html
<body> <div id="loader"><img src="../common/img/loading.gif" alt="Loading..." /></div> <div id="fade"></div> <div id="wrapper"> コンテンツ表示 </div> </body>
CSSを設定
「id=”loader”」と「id=”fade”」に以下のようにCSSを設定します。
CSS
#loader {
width: 16px; /* ローディング画像の横サイズ */
height: 16px; /* ローディング画像の縦サイズ */
display: none;
position: fixed;
_position: absolute; /* IE6対策 */
top: 50%;
left: 50%;
margin-top: -8px; /* heightの半分のマイナス値 */
margin-left: -8px; /* widthの半分のマイナス値 */
z-index: 200;
}
#fade {
width: 100%;
height: 100%;
display: none;
background-color: #FFFFFF;
position: absolute;
top: 0px;
left: 0px;
z-index: 150;
}
JSを設定
jsを以下のように記述します。（htmlに直接記述しても外部jsにしても可）
※js側でcssの設定をしているのはjsオフ時の対応の為です。
Javascript
$('head').append(
'<style type="text/css">#wrapper { display: none; } #fade, #loader { display: block; }</style>'
);
jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
var pageH = $("#wrapper").height();
$("#fade").css("height", pageH).delay(900).fadeOut(800);
$("#loader").delay(600).fadeOut(300);
$("#wrapper").css("display", "block");
});
900の部分はコンテンツ目隠し画面の最小表示時間、800の部分はコンテンツ目隠し画面表示が消えるアニメーションの時間、600の部分はローディング画像の最小表示時間、300の部分はローディング画像表示が消えるアニメーションの時間となります。
ローディング画像の制作
ローディング画像の制作には下記のような自動生成サイトを利用すると便利です。
コメントを残す