one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【8:ProgressBar】画像が読み込まれるまでプログレスバーを表示

f:id:seintoseiya:20150424190712p:plain

プロジェクトNo.8:ProgressBar
JavaScriptを使ってプログレスバーを作ってみました。

今回のポイントは以下の通り。

  • 画像を読み込む度に関数を呼び出す|ShowProg()
  • 画像を全て読み終わった時にプログレスバーを消す|body onload

ソースコード

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>ProgressBar</title>
	<link rel="stylesheet" href="style.css">
</head>
<body onload="hideProg()">
	<div id="main">
		<div id="progBase"></div>
		<div id="prog"></div>
	</div>
	<img src="./images/morning.jpg" onload="ShowProg()">
	<img src="./images/noon.jpg" onload="ShowProg()">
	<img src="./images/evening.jpg" onload="ShowProg()">
	<img src="./images/night.jpg" onload="ShowProg()">	
</body>
</html>

Javascript

<script type="text/javascript">
	maxNum = 4;
	cnt = 0;
	wSize = 400;
	function hideProg(){
		document.getElementById("progBase").style.visibility = "hidden";
		document.getElementById("prog").style.visibility = "hidden";
	}
	function ShowProg(){
		cnt++;
		barWidth = Math.floor((cnt / maxNum) * wSize);
		document.getElementById("prog").style.width = barWidth + "px";	
	}
</script>

最終的な横幅(wSize)と画像数(maxNum)を予め決めておき、
画像を読み込む度にカウント(cnt)を増やして、
プログレスバーの横幅(barWidth)を計算してスタイルを当てます。

全ての画像が読み終わった後にプログレスバーを消すには、
body要素にonloadで指定してあげると、最後に実行されます。

全ソースはこちら

github.com

関連アプリ・書籍

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript 第6版

JavaScript 第6版

入門者のJavaScript (ブルーバックス)

入門者のJavaScript (ブルーバックス)