ページ読み込み中。ローディングアニメーションを入れてみよう。
たくさんの情報を発信しているサイト。
せっかく更新した記事も、ページの読み込みが遅いと見ている側はストレスに・・
表示の遅いサイトは、それだけでユーザーがさよならしてしまうことも。
表示速度が遅くなる要因は複雑。jsやcssなどコードの量だけでなく、表示させる画像のサイズとか枚数とか・・ファイルの読み込みの数、要するにリクエストとレスポンスの数。
同時多発的なアクセス数の問題、WEBサーバのスペックの問題、さらには使う人のネット環境も・・
もうなにから改善したらいいのやら。いっそ全部テキストにしてしまえ。装飾などいらん。画像もいらん。心が折れてそんな境地に陥ることもしばしばですが・・
できることから改善していきながら、快適に見てもらうための工夫も必要なのかも。
そんなわけで、画像をたくさん読み込んでいるこのサイト。読み込みに時間がかかるページがちらほら出てきてしまいましたので・・読み込み完了までの待ち時間をせめて楽しく過ごしてもらおう、と前向きにローディングアニメーション入れてみます。
表示に時間がかかるページに、ローディングアニメーション
画面が真っ白になったり、読み込みがいつ終わるのかわからなかったりすると、見ている側は不安になるもの。今読み込んでいる状態だよ、ということを伝えることができるローディングアニメーションがあれば、安心感も与えられます。多分。
CSS
#is-loading {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: #fff;
z-index: 8;
}
#loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
text-align: center;
color: #fff;
z-index: 9;
}読み込んでる途中の要素が見えないように「is-loading」の白い背景を用意。初期表示ではローディング画面「loading」を非表示にしています。
HTML
<!-- ローディングのアニメーション -->
<div id="is-loading">
<div id="loading">
<img src="/img/loading.jpg" alt="loading中" />
</div>
</div>
<!-- コンテンツ部分 -->
<div id="loading__wrapper">
コンテンツ部分。ローディングアニメーションの読み込み後に表示します。
</div>jQuery
$(function() {
var h = $(window).height();
$('#loading__wrapper').css('display','none');
$('#is-loading ,#loading').height(h).css('display','block');
});
$(window).load(function () {
$('#loading__wrapper').css('display','block');
$('#is-loading').delay(2000).fadeOut(1000);
$('#loading').delay(1000).fadeOut(1000);
});
$(function(){
setTimeout('stopload()',10000);
});
function stopload(){
$('#loading__wrapper').css('display','block');
$('#is-loading').delay(2000).fadeOut(1000);
$('#loading').delay(1000).fadeOut(1000);
}高さを指定してローディング画面を表示。指定したアニメーションの「.delay（引数）」は引数で指定した時間（ミリ秒）だけ待つ。
「.fadeOut（引数）」の引数で速度指定した時間（ミリ秒）フェードアウトして隠す。
全ての読み込みが完了したらフェードアウトでふんわり非表示に、という処理をしています。
万が一読み込みが終わらないスクリプトや画像などがあった場合、ローディング画面が表示したままの状態になってしまうため、setTimeoutで10秒経過したらロード画面を非表示にする、という処理も念のため。
追記：「ページ読み込み後に実行」の書き方
jQuery3以降、 $(window).load なくなっちゃいました。
// ページ読み込み後に実行
$(window).load(function(){});こういう書き方になりました。
// ページ読み込み後に実行
$(window).on('load', function() {});かわいいローディングアニメーションを見つけてしまう
海外のサイトです。めちゃくちゃかわいくてずっと見てしまう・・
UX Design::Keep ‘em waiting: 7 loading page designs that make waiting (almost) fun | Appcues BLOG
作るの大変そう・・と思っていたローディング画面でしたが、jQueryで簡単に実装できちゃいました。
１ページに色々盛り込まない、画像を減らす、動画をやめる・・やりたいことと表示速度を天秤にかけてデザインを妥協するのもなんだか悲しいですね。お金をかけられるのであれば屈強なサーバ借りるとかかな。あとはキャッシュを使う。ですかね。
SHARE
New Posts
