コピペで簡単！シンプルなローディング画面
posted : 2018.07.01
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
サイトコンテンツや機能が多いとページのロード時間が必然的に長くなりますよね。
特にトップページなんかで要素がガクガクっと表示されていく様を見るのはちょっとなんだかうーんという感じです。
jQueryによるローディング画面のサンプル
ということで今回はとてもシンプルなローディング画面サンプルをHTML / CSS / jQueryで作ってみました。
※右下RETURNボタンを押すか、ページをリロードして下さい。
See the Pen Loading View Sample by mycreatesite (@mycreatesite) on CodePen.
ローディング画像はコチラからダウンロードしたGIF画像を使いました。
最近は画像ではなくCSSのみでローディングアニメーション表現する事も多いので、そういった場合は適宜HTMLとCSSを編集するといいと思います。
ちなみに仕様としては、一定時間後（サンプルでは1秒＝1000ミリ秒後）にローディング画面が隠れるようにしてます。
画像も含めたページ読み込みが終わったら即ローディング画面を隠す、という方法もあるのですが、その場合、環境によっては一瞬ローディング画面が表示されてメインコンテンツが表示される形になります。
個人的には「なんだ今の？」となって好きではないので、今回はsetTimeout関数での実装にしてみました。
下記はそれぞれのソースコードです。
ローディング画面以外のコードは省いてますが、基本的にはこのコードをHTML / CSS / JSファイルにコピペすれば動くと思います。
HTML
<section id="loading" class="loading">
<div class="loading__img">
<img src="https://goo.gl/8XdHq9">
</div>
</section>
<!-- 適宜jQueryを</body>直前で読み込み -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
CSS
.loading {
position: fixed;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
}
.loading__img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
JS
$(function(){
//ローディングエリアを取得
var loading = $("#loading");
//ローディングエリアを隠す処理
var isHidden = function(){
loading.fadeOut(1000); //1000ミリ秒かけてフェードアウト
};
//1000ミリ秒後にloadingFunc開始
setTimeout(isHidden,1000);
});
カスタマイズでさらに実用的に
カスタマイズすることによって自分好みに実装することも可能です。
簡単なところでは下記のような感じ。
- loading.fadeOut(1000)の数字部分を変更→フェードアウトの時間
- setTimeout(isHidden,1000)の数字部分を変更→フェードアウトするまでの時間（待機時間）
- loading.fadeOutをloading.slideUp等に変更→ローディング画面が隠れる際のアニメーション
ちなみにこのサイトのトップページのローディング画面も、今回のサンプルを基に実装しています（2018/7/1現在）。
下記、ざっくりとカスタマイズ内容。
- GIF画像部分はCSSのみで実装（他サイトのフリーライブラリから拝借）
- ローディング画面を隠すアニメーションもjQuery関数ではなく、CSSで実装
- ローディング中のメッセージをランダム表示（WordPressのfront-page.php内にてPHPで実装）
ローディング画面にアニメーションなり、ちょっとしたコンテンツを盛り込むとユーザーの退屈を紛らわせるので、状況に応じて上手に実装できるようになりたいもんです。
でもやりすぎはうざいので気を付けよう。
