WEBサイトはHTMLやCSS、画像など様々な要素が組み合わさって構築されています。
これらの要素はそれぞれ容量があり、読み込むためには容量に応じた時間が必要になります。
ボリュームが多かったり画像がたくさん使用されているページだと容量が大きくなり読み込むまで時間がかかりますが、読み込みの途中はつまり存在していないのと同じのため、読み込みが完了していない画像などはレイアウト崩れしています。
しかし、出来ればそんな状態のWEBサイトは見られたくないですよね。

そんな時によく利用されるのがローディング画面です。
ローディング画面とはページが完全に読み込まれるまでの間、表示しておく画面のことです。

今回の記事ではページの読み込みが完了するまでの間、表示しておくローディング画面の実装方法をご紹介したいと思います。

完成コード

まずは完成コードから見ていきましょう。

以下がローディング画面を実装するためのHTMLコードです。

<!-- ローディング画面 -->
<div class="loading">
    <p cass="loading__text">Now Loading...</p>
</div>
<!-- ローディング画面 -->

<!-- ローディング後のコンテンツ -->
<div class="wrap">
    <p>ローディング後のコンテンツ</p>
</div>
<!-- ローディング後のコンテンツ -->

以下がローディング画面を実装するためのCSSになります。

.wrap{
    opacity: 0;
    transition: .4s;
}
.wrap.on{
    opacity: 1;
    transition: 0.4s;
}

.loading{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

そして、以下がローディング画面を実装するためのjQueryのコードです。

$(window).on('load',function(){
    $('.loading').stop().fadeOut();
    $('.wrap').addClass('on');
});

このコードをコピペするだけで実装可能です。

以下が実装サンプルです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

まずはHTMLの部分から。
ローディング画面を実装するために、ロード中の画面とロード化完了した後に表示する画面で完全にコードを切り分けます。

<!-- ローディング画面 -->
<div class="loading">
    <p cass="loading__text">Now Loading...</p>
</div>
<!-- ローディング画面 -->

<!-- ローディング後のコンテンツ -->
<div class="wrap">
    <p>ローディング後のコンテンツ</p>
</div>
<!-- ローディング後のコンテンツ -->

そして続いて、CSSのポイントは以下の部分になります。

.wrap{
    opacity: 0;
}

ローディング後の画面はローディングが完了するまでは、見えなくするためにopacityを0に設定しておきます。

そして、ローディング画完了した時の設定として以下のCSSを用意します。

.wrap.on{
    opacity: 1;
    transition: 0.4s;
}

このクラスは後ほど解説するjQueryのコードでローディングが完了したタイミングで.wrapに設定するためのものです。

そして、最後のjQueryの部分です。jQueryは以下のようなコードになっています。

$(window).on('load',function(){
    $('.loading').stop().fadeOut();
    $('.wrap').addClass('on');
});

画面の読み込みが完全に完了したら、.loading部分が非表示になり、逆に.wrap部分に「on」クラスが設定されるようになっています。CSSのアニメーションを設定するtransitionが0.4sと設定されているので、0.4秒かけてコンテンツ部分が表示されます。

これにより読み込みが完了したタイミングでローディング画面が消え、それと入れ替わるようにコンテンツ部分が表示される機能が実現出来ます。

まとめ

いかがでしたか？
このように短いコードで簡単にローディング画面は実装することが出来ますね。
最後にもう一度完成コードを記載しますのでコピペでご使用ください。

<!-- ローディング画面 -->
<div class="loading">
    <p cass="loading__text">Now Loading...</p>
</div>
<!-- ローディング画面 -->

<!-- ローディング後のコンテンツ -->
<div class="wrap">
    <p>ローディング後のコンテンツ</p>
</div>
<!-- ローディング後のコンテンツ -->

.wrap{
    opacity: 0;
}
.wrap.on{
    opacity: 1;
    transition: 0.4s;
}

.loading{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

$(window).on('load',function(){
    $('.loading').stop().fadeOut();
    $('.wrap').addClass('on');
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.