カテゴリー: ウェブ制作

タグ:jQuery(8)  

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;
}

まとめ

たったこれだけの記述で導入できる上に、画像やSCCによって雰囲気も簡単に変えることができるので、かなり導入しやすいのではないでしょうか。

アパレル系など、魅せ方にもこだわりたいサイトで使ってみるのも良いかもしれません。

それでは、また。

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

2017.03.02

Twitterでつぶやく

Facebookでシェアする

実験中→ いいね: ツイート: 2

おすすめの記事

TOP