画像がいっぱい並んでるページなんかは、データが重くなるので、ページの表示に時間がかかる。

そんなときは、まっしろいまま待たせるんじゃなくて、
せめて、

「今ローディング中ですよー」

loading

という、このグルグルまわるアニメーションを出してあげると、
少しはイライラが軽減される。

（ほんの少しだけ）

それを、javascript　＆　jQueryでシンプルに実装するのを説明します。


サンプルをつくったのでまずは確認。

あぁ、ネコかわいいよ、、ねこ・・。


1.まずはローディング画像を用意

あのグルグルまわってる画像 はGIFアニメで作られてる。
適当に「loading画像」 で検索してきてもいいし、
 こういうジェネレータサイトみたいなのもある。
http://loadergenerator.com/ 




2.html側

<div id="loading"><img src="img/loading/loading.gif"></div>
<div id="container">
　〜ページの内容が入るヨ〜
</div>

 
大枠としてはdivが２個あるだけ。

 1つ目のdivはさっきダウンロードしたローディング画像グルグルが入ってる。

２つ目のdiv id="container" にはいつものようにページの中身を入れる。



3.css側

#container{display:none;}
#loading{
position:absolute;
left:50%;
top:20%;
margin-left:-30px;
}

ページの準備ができるまでは、#containerは非表示にしとく。
そうしとかないと、いつものように、準備が完了したところから、ガンッガンッって表示されだしちゃうからね。
準備が整ってからパッと完成ページが出たらキレイだね。

 #loadingのほうは、位置を真ん中にもってきてるだけなので、今回はどうでもいい。


そして問題のjavascript側


4.javascript側

window.onload = function(){
$(function() {
$("#loading").fadeOut();
$("#container").fadeIn();
});
}


window.onloadは、htmlや画像なんかの全部のリクエストがダウンロードされて準備完了したヨー　というタイミングでスタートさせろって意味。

その中身はjQueryでシンプルに2行かいてます。 

$("#loading").fadeOut();

→#loadingはフェードアウトさせれ

$("#container").fadeIn(); 

→#containerはフェードインさせれ


簡単！
 

※とはいえ普通に自宅でwifiで見てたら、よっぽどでかいファイルがあるとか、なんかサーバーがすんごい重くなっちゃってる以外は、ローディングなんていらないくらいすぐにデータのダウンロードが完了しちゃうと思う。

サンプルもでかめの猫画像などを4枚くらい並べてみたけど、ローディングが瞬殺で消えちゃうから、わざわざdelay(2000)で2秒遅らせたりしてる。
（本番で使うときは表示が早ければそれにこしたことはないんだからdelayなんて使う必要ない）

 

ということで、ローディングが活躍するのは、スマホサイトのほうなんだと思う。

スマホサイトつくってる方はわかるだろうけど、なんてたってスマホは遅いから。


※※ここではサクっと実装するためにシンプルに説明してるけど実際は
以下サイトさんのように、jsをオフにしてる人のための配慮っていうのをしたほうがいいよ！
http://2g.atsukitaira.com/javascript/jquery/953/
（jsオフにしてる人っていまどきほんとにいるの？）



ドミンゴス！