サイトロード画面が欲しくなった

スマホサイトを制作している時に、jqueryやらなんやらを読み込む前に、ナビとかが微妙に崩れていることに気づいた。
これを隠したいと思ったのがきっかけ。

更にスマホユーザーは電波が悪いところでサイトを見に来た時に、サイトのローディングをまつまえに離れてしまうというもったない行動が見受けられる。聞いた話では、1秒の読み込み時間が現代人が待てる平均時間なんだとか。。。
それ以降はいらいらする(しながら待っている)らしい。

こういった負担をユーザーにかしては面白くも無いので、とりあえずこんな感じで実装してみました。

いろんなサイトを参考にしましたが、ベースはこちらのサイトを参考に自分のサイトに合わせてアレンジしました。

codepen.io/jonginwon/pen/emfFD

HTML

CSS

ちょこっと改修

普通に引用してきたのでは、Google Chromeで動作しなかったので、アニメーションの部分を変更して実装しています。

また読み込み時にははjqueryで1秒間アニメを必ずユーザーに見せてからコンテンツを表示させるようにしました。これが吉とでるか凶と出るかはわかりませんが、半端にロードが出るよりは、読み込みを画面を確実に表示させたほうが、アプリ慣れしてきた目にちょうど良いのではないかと思いました。

こちらは機を見て調節していく予定です。

この時間の微妙な変更が、直帰率とかに関わって来たりしてるなら面白いですねw
いや絶対関わっていると思いますがw

ちなみに動作はLinuxとアンドロイドのFireFoxとchromeでしかしていないので、少々不安ですが年明けで各デバイス使えるようになったら確認していきたいと思います。

来年もよろしくね!!