ページ読み込み中に、くるくる回ってくれるやつを、実装した。

ネタ元はこちら >>http://gimmicklog.main.jp/jquery/278/

 

3年ほど前は、もっと、面倒だったイメージがあったが、
jQueryや、CSSの理解力が高まったせいか、
わりと、すんなり設置出来たが、

置くだけでは、芸もないので、カスタマイズしてみたｗｗ

 

このネタ元では、ページが真っ黒になっているけど、
それでは、寂しすぎるので、
アルファ（透過）処理で、フェードイン・フェイドアウトしたところ、
すこぶるかっこよくなってしまった！！

カスタマイズしたのは、以下のとおり。

#loader-bg {
z-index: 99999;
opacity: 0.3; filter: alpha(opacity=30);?
}

を追加し、

$('#wrap').css('display', 'block');

は、コメントアウト or 消す。

メインコンテンツは、真っ黒から、突然表示するより、
うっすら表示されていたほうが、かっこいい演出になったｗ

 

しかし、それでもちょっと、残念感がある。

 

ページが切り替わるまでの、待ち時間が長く感じませんか？？

ってことで、追加の処理↓

 $(window).on('beforeunload',function(){
var h = $(window).height();
// $('#frame_outer').css('display','none');
$('#loader-bg ,#loader').height(h).css('display','block');
});

やっていることは、
ページを離れるときに、ページが読み終わった時と同じ処理を追加しただけ。

 

すこぶるかっこよくなってしまった～～（笑

.