昔は、スマホもブラウザでWEBサイトのページを読み込むと、ローディング用のアイコンがグルグル回るだけでしたが、今ではプログレスバーが標準搭載されています。
残念ながら、未だにパソコンのブラウザはタブのファビコン辺りがグルグル回るだけで、どのくらいローディングが進んで、いつ完了するのか見えない状況です。
そこで、ローディング中の画面をプログレスバーで綺麗にカッコよく魅せてくれるJavaScriptのライブラリ「Pace.js」を紹介します。
テーマも選べるPace.js
Pace.jsで用意されているプログレスバーは14種類のデザインがあります。
バー、スピーナー、パーセント表示タイプなど様々です。
冒頭でスマホは対応していると述べましたが、Ajaxなどの非同期通信を行うとプログレスバーは表示されません。
しかし、Pace.jsはAjaxにも対応しているのです！！
Pace.jsの使い方
基本的な使い方と、ちょっとした魅せ方を紹介します。
headタグ内に記述する
JavaScriptは閉じるbodyタグ直前に書くことが多いですが、Pace.jsは最初に読み込まれるようにheadタグの上部に書くのがベストです。
今回もソースをサーバ上に置かず、CDNを使います。
|
1 2 3 4 5 6 |
<head> ... <script src="//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/white/pace-theme-flash.min.css"> ... </head> |
ページのローディング中は読み込むコンテンツの重さによって、少しずつバラバラに表示されることがあります。
そんな時は、ローディング中のコンテンツを隠すと目がチカチカしないで済みます。
|
1 2 3 |
.pace-running .wrapper { display: none; } |
このままでもページのローディングが終わった後に表示されるが、白い画面にいきなりパッと表示されるとカッコ悪いのでフェードインして表示させる。
|
1 2 3 |
Pace.on('done', function(){ $('.wrapper').fadeIn(); }); |
プログレスバーの必要性
読み込み状況が見えたから何？って感じの人もいるかもしれません。
人間がページのローディングに待てる時間は、約2秒程度と言われています。
あくまで持論ですが、せっかちな人からすると何か気を紛らわすものがないと、すぐにページを離脱してしまいます。
私なんて、あまりにローディングが遅いとイライラして「F5」連打してしまいます。（余計に遅くなる迷惑なアホですｗ）
以上です。
コメント