ページのローディング画面を作成する

2015.03.24　Posted by Coding_team

Webプログラミング

第10回目ウェブラボ技術メモです。

今回はjQueryを使って、ページが読み込まれるまで表示されるローディング画面を作ります。

ページの表示速度が遅いのは、ユーザーが見るのをやめてしまう大きな原因になってしまいます。そこで、少しでも待ってもらう為にページの読み込み状況を表示させたいと思います。

参考にさせて頂いたWebサイトはこちら。では早速実装してみましょう。

HTMLのhead内はjQueryの読み込みと一緒に以下の記述をします。

■HTMLhead内

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
	Array.prototype.remove = function(element) {
	  for (var i = 0; i < this.length; i++)
	    if (this[i] == element) this.splice(i,1); 
	};
	function preload(images, progress) {
		var total = images.length;
	    $(images).each(function(){
			var src = this;
	        $('<img/>')
				.attr('src', src)
				.load(function() {
					images.remove(src);
					progress(total, total - images.length);
				});
	    });
	}
	var now_percent = 0;
	var displaying_percent= 0;
	preload([
		'img/img01.jpg',　//表示したい画像
		'img/img02.jpg',　//表示したい画像
		'img/img03.jpg'　//表示したい画像
	], function(total, loaded){
		now_percent = Math.ceil(100 * loaded / total);
	});
	var timer = window.setInterval(function() {
		if (displaying_percent >= 100) {
			window.clearInterval(timer);
			$('#loader').fadeOut('slow', function() {
				$('<img />') //HTMLに吐き出される記述
					.attr('src', 'img/img01.jpg') //表示したい画像
					.appendTo('#content'); //画像を表示したい場所
				$('<img />') //HTMLに吐き出される記述
					.attr('src', 'img/img02.jpg') //表示したい画像
					.appendTo('#content'); //画像を表示したい場所
				$('<img />') //HTMLに吐き出される記述
					.attr('src', 'img/img03.jpg') //表示したい画像
					.appendTo('#content'); //画像を表示したい場所
				$('#content').fadeIn('slow'); 

			});
		} else {
			if (displaying_percent < now_percent) {
				displaying_percent++;
				$('#load-text').html(displaying_percent + '%');
				$('#bar span').css('width', displaying_percent + '%');
			}
		}
	}, 
	5);	// ％表示の更新間隔（ミリ秒）
});
</script>

$(function() {

Array.prototype.remove = function(element) {

for (var i = 0; i < this.length; i++)

if (this[i] == element) this.splice(i,1);

};

function preload(images, progress) {

var total = images.length;

$(images).each(function(){

var src = this;

$('<img/>')

.attr('src', src)

.load(function() {

images.remove(src);

progress(total, total - images.length);

});

}

var now_percent = 0;

var displaying_percent= 0;

preload([

'img/img01.jpg',　//表示したい画像

'img/img02.jpg',　//表示したい画像

'img/img03.jpg'　//表示したい画像

], function(total, loaded){

now_percent = Math.ceil(100 * loaded / total);

});

var timer = window.setInterval(function() {

if (displaying_percent >= 100) {

window.clearInterval(timer);

$('#loader').fadeOut('slow', function() {

$('<img />') //HTMLに吐き出される記述

.attr('src', 'img/img01.jpg') //表示したい画像

.appendTo('#content'); //画像を表示したい場所

$('<img />') //HTMLに吐き出される記述

.attr('src', 'img/img02.jpg') //表示したい画像

.appendTo('#content'); //画像を表示したい場所

$('<img />') //HTMLに吐き出される記述

.attr('src', 'img/img03.jpg') //表示したい画像

.appendTo('#content'); //画像を表示したい場所

$('#content').fadeIn('slow');

});

} else {

if (displaying_percent < now_percent) {

displaying_percent++;

$('#load-text').html(displaying_percent + '%');

$('#bar span').css('width', displaying_percent + '%');

}

5); // ％表示の更新間隔（ミリ秒）

});

</script>

ページが遅くなる大きな原因は画像なので、あらかじめjQueryで画像を読み込んでおき、読み込み終わったらHTMLに画像の記述を出力します。

HTML本文に必要な記述は以下の通りです。

■HTML本文

<div id="loader"> //ローディング画面
Loading <span id="load-text">0%</span>
	<div id="bar"><span></span></div>
</div>
<div id="content" style="display: none;">
	<!-- ここにコンテンツが入ります。 -->
</div>

<div id="loader"> //ローディング画面

Loading <span id="load-text">0%</span>

</div>

</div>

この記述を設置したい場所に入れます。

次にCSSにローディング画面のレイアウト情報を記述してあげます。

■CSS

#loader {
  font-family: 'Marvel', sans-serif;
  margin: 300px auto 300px;
  width: 300px;
  text-align: center;
  font-size: 25px;
  color: #333333;
  }
#bar {
  width: 300px;
  height: 2px;
  border:1px solid #333333;
  padding: 1px;
  margin-top: 10px;
  font-size: 1px;
  }
#bar span {
  display: block;
  width: 0px;
  height: 2px;
  background: #333333;
  }