現在ロード中を知らせるローディング画面（Now Loading）は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローディング画面が作られるようになった理由は、ローディング画面を作らないと読み込みが終わるまで真っ白で何も表示されないためです。それだと閲覧者がページが固まったと勘違いしてすぐに帰ってしまうかもしれません。
ウェブサイトにおいては1秒でも早くページの読み込みが終わるに越したことはありませんが、特別なサイトだとどうしてもページの読み込みに待ち時間が発生してしまう事もあります。なので、ページの読み込みをなるべく待ってもらう為にローディング画面を実装する必要がありました。
htmlでローディング画面
今まで FLASH でローディング画面を作ったことはありましたが、html 上で作った事はありませんでした。その為作り方を調べる必要があったのですが、ローディング画面を作るだけにプラグインを使ったり長いスクリプトを書いたりとても難しいものばかりでした。
ローディング画面なんてもっとシンプルに、極限まで少ないスクリプトで実現できないものかと考えてみました。読み込み度をパーセンテージで表示するものもありますが、ここでは極限までシンプルにパーセンテージなしのローディング画面を作ってみます。ローディング画面入門編です。
ロード中にこのようなローディング画像を表示する事にします。
とりあえずまずはサンプルを御覧ください。
ロードが完了するまでローディング画像が表示され、完了したらページが表示されます。仕組みをこれから解説します。
css部分
body{
background-image:url("image/load.gif");
background-position: center center;
background-attachment: fixed;
background-repeat:no-repeat;
}
body.loaded{
background-image:url("image/back.jpg");
background-position: center top;
background-size:cover;
}
最初に body 要素の背景にローディング画像を表示しておいて、ロードが完了したら背景を切り替えるという仕組みです。このように2つの css を用意しておきます。上がロード中で下がロード後の css です。
loaded というクラス名は自由に決めていただいて構いません。
jquery部分
jquery と聞いて難しいと身構えてしまうかもしれませんが、極限までシンプルにしました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
まずは head タグ内で jquery 本体を読み込む必要があります。既にある場合は必要ありません。
$(window).on('load', function(){
$("body").addClass('loaded');
});
たった3行のこれだけです。1行目はページのロードが完了したら…という関数の始まりです。そして、2行目はロードが完了したら body 要素に「loaded」というクラスを付加しますよという意味です。これでロードが完了したら背景画像が切り替わります。背景画像がないのであれば css で「background-image:none;」とすれば良いでしょう。
この jquery は head タグ内に script タグで括って記述します。
おわりに
ローディング画面の方式にはバーが伸びるプログレスタイプやパーセンテージを表示するもの等いろいろありますが、いきなり難しいものを作ろうと思っても時間がかかるだけです。まずはシンプルなものから作って原理を理解する事をおすすめします。凝りだすのはそこからでも遅くはありません。