jQueryを使って簡単にできるローディング画面を作ってみた

フルスクリーンで動画や画像を表示しようとしたりすると、必然的にサイズが大きくなりサイトが重くなってしまい、ページの表示速度が遅くなってしまう事があると思います。

ページの表示が遅いと『即、戻るを押す』。僕もネットサーフィンをしている時についやってしまいます。

コンテンツが表示されるまでの間に代わりに表示させておくローディング画面を作っていきたいと思います！

これが今回の完成図です。

See the Pen ローディング画面 by tipdip (@tipdip_blog) on CodePen.

ローディング画像を用意する

今回はgifアニメーションでこんな感じの画像を用意しました。

ロード画像のgifアニメーションはPhotoshop等で作成できますが、フリー素材も調べれば色々ヒットするので、そちらを使うのも手かもしれません。

今回僕もこちらのサイトのものを使用させていただきました。

FREE Minimal Loop Preloaders | MarinaD
http://marinad.com.ar/free-minimal-loop-preloaders/

HTMLとJavascriptを記述

HTMLの記述はこんな感じになります。

HTML

<head>
・
・
・
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/function.js"></script>
</head>

<body>

<!--ロード画面の記述-->
  <div id="loader-bg">
    <div id="loading">
        <img src="images/loading.gif">
    </div>
  </div>
<!--ロード画面の記述ここまで-->

  <div id="contents">
    <p>ロードが終わるとコンテンツが表示されます。 </p>
  </div>
</body>

Javascriptファイルは今回、『function.js』としていますが、名前は任意です。
<div id=”loader-bg”>〜</div>がロード中に表示される内容になります。

HTMLは、これで準備OKなので、次に『function.js』の中身を記述していきます。

function.js

window.onload = function(){  // ローディング画面をフェードアウトさせる
    $(function() {
        $("#loading").fadeOut();
    });
}
    
$(function() {   //ロード中はコンテンツの高さをページの高さに合わせる
    var h = $(window).height();
    $('#contents').css('display','none');
    $('#loader-bg ,#loader').height(h).css('display','block');
});
     
$(window).load(function () {  //全ての読み込みが完了したら実行する
    $('#loader-bg').delay(900).fadeOut(800);
    $('#loader').delay(600).fadeOut(300);
    $('#contents').css('display', 'block');
});

$(function(){  //10秒たったらロードを終わらせる
    setTimeout('stopload()',10000);
});

これでロード画面は表示されるようになりました！

後はスタイルシートをいじってスタイルを整えてやれば完成です！

ご参考までに、今回のスタイルシートはこんな感じにしています。

css

#loading{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
  }
     
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 1;
 }

body{
  background:#ccc;
}

#contents p{
  position:absolute;
  line-height:30px;
  width:600px;
  text-align:center;
  top:50%;
  left:50%;
  margin-top:-15px;
  margin-left:-300px;
}