【プラグイン不要】jsとcssでローディング画面を簡単に実装する方法

Web2016年11月11日

jsとcssでコンテンツのローディング画面をプラグインなしで簡単に実装する方法をご紹介いたします。

サンプルコード

html

<header>
～
</header>
<p id="loading-img"><img src="/shared/images/loading.gif" alt="読み込み中"></p>
<div id="loading">
<div id="content">
～
</div><!--/#content-->
</div><!--/#loading-->
<footer>
～
</footer>

css

#loading {
  opacity:0;
}

#loading-img{
  position: relative;
}

#loading-img img {
  position:fixed;
  top:50%;
  left:0;
  right:0;
  bottom:0;
  margin:0 auto;
  z-index:100;
}

#loading-img:after{
  content:"";
  display:block;
  height:100%;
  width:100%;
  position:fixed;
  opacity:0;
  z-index:99;
}

js

(function () {

$(window).load(function(){
    setTimeout(function(){
        $('#loading-img').fadeOut(300);
        $('#loading').animate({"opacity":"1"},500);
    },300);
});

})(jQuery);

※jQueryを読み込んでいる場合のスクリプトとなります

解説

html

ローディング画像を<img>タグで配置します。
<img>は<p id="loading-img">で括っておきます。ローディング画像（gifアニメ）は自作もできますが、以下のようなサイトを使って簡単に生成できるので必要に応じてお使いください。

ここではページ全体ではなく<header>と<footer>の間にあるコンテンツエリアにローディング画像を表示します。コンテンツエリアを内包する<div id="content">を、<div id="loading">で括ります。

css

ローディングを表示するエリアをopacity:0;でデフォルトは非表示にします。さらに、ローディング画像をコンテンツに対し中央表示するcssを記述します。

js

ページ読み込みが完了したらローディング画像をfadeOutさせ、非表示にしていた<div id="loading">をopacity:1;で表示に切り替えるスクリプトを記述します。

アニメ―ションのスピードは、$('#loading-img').fadeOut(300);や$('#loading').animate({"opacity":"1"},500);の「300」や「500」の部分を適宜変更してください。また、「},300);」の300はsetTimeoutで最低0.3秒はローディング画像が表示されるという意味になります。こちらは適宜お好みで変更してください。

まとめ

Web屋の芝生DIYでは実装を見送りましたが、コンテンツ量が多いサイトなどの場合、ページがガタガタっとなりながらレンダリングすることを嫌うユーザーもいます。
そのような場合においてローディングを実装しておくと、完全にレンダリングが完了した状態（キレイな状態）でユーザーに閲覧させることができますので、実装の際は本記事をご参考にしていただければ幸いです。

「Web」の他の記事を読む