The current article
HTML版簡易ローディング画面設置ｊQuery
今回ご紹介するのは、ページの読み込み完了までローディング画面を表示し、完了後コンテンツを表示する方法です。
大きな画像を多用していたり、1ページあたりの容量が大きくなった場合など、読み込みが完了するまで結構な時間がかかってしまうページでの訪問者のイライラを解消する選択肢の一つにいかがでしょうか。
capture
HTMLで作成したページでローディング画面を表示させ、ページ全体が読み込まれてから表示させる方法を、2GRAVITY(ニジュウリョク)様が、とてもわかり易く説明していただいているのでご紹介致します。
Flashページで読み込み時に「loading・・・」等と表示されるのをよく見かけますよね。
javascript（jQuery版）を使用すると、HTMLで作成したページでも同じようなことが表現可能になります。
【html】記述例
<body> <div id="loader"><img src="アニメーションgifまでのパス" width="画像の幅" height="画像の高さ" alt="Loading..." /></div> <div id="fade"></div> <div id="container"> ・・・コンテンツが入ります・・・ </div><!-- /container --> </body>
bodyタグ直下に、2行目3行目「div#loader」と「div#fade」を記述して下さい。
これは、読み込みが完了するまで先に表示する要素です。
（アニメーションgifの作り方については後述します）
【css】記述例
#loader {
width: 画像の幅px;
height: 画像の高さpx;
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;
}
7行目から10行目で、ウィンドウの中央に配置させています。
4行目17行目の「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行目で、cssで設定した#fadeと#loaderの「display：none；」を「display：block；」に、#containerを「display：none；」に書き換えています。
こうすることで、javascriptをオフにしている人はjavascriptを読み込まないのでcssの記述通り「display：none；」でローディング画面が非表示のままページが表示され、
オンの人は#containerが非表示になり#fadeと#loaderを表示させローディング画面が表示されるわけですね。なるほど。
5行目からは、全ての読み込み完了後に呼ばれる関数の記述です。
このあたりが気になる方は、紹介させていただいている元ページをご覧ください。（手抜きですいません・・・）
ちなみに上記jsをコピーして「loading.js」などというファイルを作成して読み込ませた場合。
こんな感じでしょうか。
<html>
<head>
・
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="js/loading.js"></script> <!--jsフォルダ内の場合-->
・
・
</head>
<body>
・
・
ローディング画像について
ローディング画像についてですが、PhotoshopやアニメーションGIF作成ソフトなどで作ることができます。
敷居が高いと思われる方は、ローディング画像を生成してくれるジェネレーターがありますので幾つか紹介します。
Chimply generates your images
Loader Generator
Preloaders.net
英語のサイトですが、直感的に作成できると思います。
あとは、出来上がった画像をダウンロードして、フォルダに入れてリンクさせてあげればOK！
ちなみに使用例はコチラ
ページの表示が重いなって感じている方は、是非ローディング画面設置をしてみて下さい！
最後になりましたが、2GRAVITY様に感謝いたします。
参考：jQueryでhtmlの簡易ローディング画面をつくる | 2GRAVITY
関連記事：「Flashっぽいローディングを表示するjQuery」
関連記事
