[JS]ローディング時の読み込み量を取得し、数値化する方法

August 16, 2017Code

サイトの読み込み速度はサイト離脱率に大きく影響を及ぼすと声高に言われて久しい昨今ですが、そんな離脱率を下げるべく様々なローディングスニペットが展開されていますよね。ライブラリも多数あると思います。ここでは、そんなローディングアニメーションを一歩進んだ形で読み込み量に応じたアニメーションを実装すべくその基本となる読み込み量を数値化することを目的としています。

原則読み込みに影響を与えるのは画像、動画ファイルにあたると考えられますが、ここでは画像imgにフォーカスしてやり方を見ていきたいと思います。

考え方としては、ページ内の画像総数/読み込み済の画像数の取得。これら2つの数字を用いて、読み込み量を数値化し、パーセント(%)に昇華。アニメーションさせる要素に数字を代入して反映。
この流れです。

実装サンプル

HTML


<div id="page">
 <div id="loaderWrap">
  <div id="loader">
  </div>
 </div>
 <div id="persent">
 </div>
 <img src="asset/img.jpg" alt="#">
 <img src="asset/img.jpg" alt="#">
 <img src="asset/img.jpg" alt="#">
 <img src="asset/img.jpg" alt="#">
 <img src="asset/img.jpg" alt="#">
</div>

CSS


#page {
 position: relative;
}
#loderWrap {
 position: fixed;
 top: 0;
 width: 100vw;
 height: 100vh;
 background: #FFFFFF;
}
#loderWrap #loder {
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 5px;
 background: #000000;
}
#persent {
 position: absolute
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: #000000;
 font-size: 30px;
}

JS


//loding animation
var now_position=0; //プログレスバーの現在の位置
var all_img = $("img"); //すべての画像
var img_len = all_img.length; //画像の総数
var loaded_counter = 0; //読み込み完了の数値
var loading = $("#loader"); //プログレスバーの要素
var timer = null;
//アニメーションスタート
startAnime();
	for (var i = 0; i < img_len; i++) {
    	all_img[i].addEventListener("load", loadFunc);
	}
	function loadFunc() { //読み込み画像のカウント
		loaded_counter++;
	}
	function startAnime() {
    	if (!timer) {
        	timer = setInterval(loadingFunc, 33);
    	}
	} 
	function stopAnime() {
    	clearInterval(timer);
    	timer = null;
    	$("#page").fadeIn(500, function () {
        	$("#loaderWrap").fadeOut(1000);
        	$(all_img).delay(1000).fadeIn(1500);
    	});}
	//
	function loadingFunc() {
    	if (now_position > 99.9) {
        	now_position = 100;
        	stopAnime();
		}
    // 読込画像数/画像総数*100のパーセント算出
	var target_position = (loaded_counter/img_len) * 100;
    	now_position+= (target_position - now_position) * 0.2;
    	$("#percent").text(Math.floor(now_position)); //読込量を取得
    	$(loading).css("width", now_position + "%"); //幅を代入
	}

上記の例では、取得した数字を2つ要素の代入しています。
一つは、#loeder
こちらは、$(loading).css("width", now_position + "%");で指示している通り、widthを0から100%に向けて増加させています。
もう一つは#persent
こちらは、$("#percent").text(Math.floor(now_position));にて数字がカウントアップするようになっています。

SVGアニメーションとかと連動すると結構先進的なビジュアルの実装が可能になるので、ローディング時の離脱を防ぐにはかなり有効な手段になるのではないでしょうか。

もっとシンプルに描く方法がありそうな気がしますが、導入編として一旦この辺りにしておきます。