jQueryで画像の読み込み具合を表示するローディングバーの作り方

今回はjQueryでページの読み込み具合を表示するローディングバーの作り方を紹介します。

スマホだとわかりやすいですが、ページを読み込むときに上にバーが表示されますよね。

あれをWebページでも表示しようということです。

ローディングバーが表示されるとユーザーの今ページがどれくらい読み込まれているかを把握できるので、離脱率の低下などが期待できます。

 

作り方

今回は画面上部に青色のローディングバーを作ります。

 

HTML

<body>
・・・

  <div class="loadingBar"></div>
</body>

 

HTMLでは</body>の前に<div>を用意しておきます。

 

CSS

/*-- loading bar --*/
  .loadingBar {
  width: 0;
  height: 4px;
  background: #03a7eb;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.2s linear 0s;
}

position: fixedで固定しておきましょう。

また、初期状態ではwidth: 0としておきます。滑らかに動くようにtransitionも指定しておくといいでしょう。

 

jQuery

今回はローディングに時間がかかりそうな、画像を並べたサイトを仮定して作りました。

$(function() {
  var loadCount = 0, //loading状況の初期化
    imgLength = $("img").size(); //読み込む画像の数を取得
  $("img").each(function() {
    var src = $(this).attr("src");
    $("<img>")
      .attr("src", src)
      .load(function() {
        loadCount++; //画像が読み込まれたら、loading状況を更新
      });
  });

  var timer = setInterval(function() { //一定間隔でloading状況をローディングバーに反映
    $(".loadingBar").css({
      "width": (loadCount / imgLength) * 100 + "%" //読み込まれた画像の数を画像全体で割り、%としてローディングバーのwidthに設定
    });
    if((loadCount / imgLength) * 100 == 100){ //100%読み込まれたらローディングバーを隠す
      clearInterval(timer);
      $(".loadingBar").delay(200).animate({
      "opacity": 0
      }, 200);
    }
  }, 5);
});

 

まずは画像の枚数をsize()で取得し、画像が読み込まれるたびにloadCountの数値が上がっていきます。

読み込まれた画像の状況を更新しているのは以下の部分ですね。

    $("<img>")
      .attr("src", src)
      .load(function() {
        loadCount++; //画像が読み込まれたら、loading状況を更新
      });

 

読み込まれた状況はsetInterval()で全ての画像が読み込まれるまでは、一定の間隔でローディングバーのwidthをして反映します。

この処理をしているのが以下の部分ですね。

  var timer = setInterval(function() { //一定間隔でloading状況をローディングバーに反映
    $(".loadingBar").css({
      "width": (loadCount / imgLength) * 100 + "%" //読み込まれた画像の数を画像全体で割り、%としてローディングバーのwidthに設定
    });
    if((loadCount / imgLength) * 100 == 100){ //100%読み込まれたらローディングバーを隠す
      clearInterval(timer);
      $(".loadingBar").delay(200).animate({
      "opacity": 0
      }, 200);
    }
  }, 5);

 

読み込みが100%になったらclearInterval()でタイマーを解除し、animate()を使って透過させていきます。

deley()を使って少しアニメーションの開始を遅らせるとよりわかりやすいでしょう。