現在何パーセントまで読み込まれているかを表示するローディングを実装してみる

現在何パーセント読み込まれているかを表示するローディングをJavaScriptで実装してみます。

サンプルコード

HTML

ローディング用の要素を配置しておきます。

<div id="loadingBg"></div>
<div id="loading">
	<div id="percent"><span id="percent-text"></span>％</div>
	<div id="gauge"></div>
</div>

CSS

ローディング要素の配置は適宜変更してください。

#loadingBg {
	position: fixed;
	left: 0;
	top: 0;
	width: auto;
	min-width: 100%;
	height: auto;
	min-height: 100%;
	background: #ffffff;
	opacity: 0.6;
}
#loading {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 400px;
	padding: 50px 20px;
	margin: -70px 0 0 -220px;
	background: #ffffff;
}
#loading #percent {
	margin-bottom: 5px;
	text-align: center;
	font-size: 16px;
}
#loading #gauge {
	width: 0px;
	height: 5px;
	background: #ff0000;
}

JavaScript

var images = document.getElementsByTagName('img'); // ページ内の画像取得
var percent = document.getElementById('percent-text'); // パーセントのテキスト部分
var gauge = document.getElementById('gauge'); // ゲージ
var loadingBg = document.getElementById('loadingBg'); // ローディング背景
var loading = document.getElementById('loading'); // ローディング要素
var count = 0;
var gaugeMax = 400; // ゲージの幅指定
var current;

// 画像の読み込み
for (var i = 0; i < images.length; i++) {
	var img = new Image(); // 画像の作成
	// 画像読み込み完了したとき
	img.onload = function() {
		count += 1;
	}
	// 画像読み込み失敗したとき
	img.onerror = function() {
		count += 1;
	}
	img.src = images[i].src; // 画像にsrcを指定して読み込み開始
};

// ローディング処理
var nowLoading = setInterval(function() {
	// 現在の読み込み具合のパーセントを取得
	current = Math.floor(count / images.length * 100);
	// パーセント表示の書き換え
	percent.innerHTML = current;
	// ゲージの変更
	gauge.style.width = Math.floor(gaugeMax / 100 * current) + 'px';
	// 全て読み込んだ時
	if(count == images.length) {
		// ローディング要素の非表示
		loadingBg.style.display = 'none';
		loading.style.display = 'none';
		// ローディングの終了
		clearInterval(nowLoading);
	}
}, 100);

パーセント表示のローディングのデモページ
処理自体は問題ないのですが、キャッシュが残っていたりするとローディングがすぐ終わってしましいます。
　

サンプルコード2

ローディングが最低限表示される時間を設定するようにしました。

JavaScript

var images = document.getElementsByTagName('img'); // ページ内の画像取得
var percent = document.getElementById('percent-text'); // パーセントのテキスト部分
var gauge = document.getElementById('gauge'); // ゲージ
var loadingBg = document.getElementById('loadingBg'); // ローディング背景
var loading = document.getElementById('loading'); // ローディング要素
var imgCount = 0;
var baseCount = 0;
var gaugeMax = 400; // ゲージの幅指定
var current;

// 画像の読み込み
for (var i = 0; i < images.length; i++) {
	var img = new Image(); // 画像の作成
	// 画像読み込み完了したとき
	img.onload = function() {
		imgCount += 1;
	}
	// 画像読み込み失敗したとき
	img.onerror = function() {
		imgCount += 1;
	}
	img.src = images[i].src; // 画像にsrcを指定して読み込み開始
};

// ローディング処理
var nowLoading = setInterval(function() {
	if(baseCount <= imgCount) { // baseCountがimgCountを追い抜かないようにする
		// 現在の読み込み具合のパーセントを取得
		current = Math.floor(baseCount / images.length * 100);
		// パーセント表示の書き換え
		percent.innerHTML = current;
		// ゲージの変更
		gauge.style.width = Math.floor(gaugeMax / 100 * current) + 'px';
		baseCount += 1;
		// 全て読み込んだ時
		if(baseCount == images.length) {
			// ローディング要素の非表示
			loadingBg.style.display = 'none';
			loading.style.display = 'none';
			// ローディングの終了
			clearInterval(nowLoading);
		}
	}
}, 10);

パーセント表示のローディングのデモページ2
ローディング自体は一定時間表示され、その時間内に画像の読み込みが完了していない場合には引き続きローディングが表示されます。