第10回目ウェブラボ技術メモです。
今回はjQueryを使って、ページが読み込まれるまで表示されるローディング画面を作ります。
ページの表示速度が遅いのは、ユーザーが見るのをやめてしまう大きな原因になってしまいます。そこで、少しでも待ってもらう為にページの読み込み状況を表示させたいと思います。
参考にさせて頂いたサイトはこちら。では早速実装してみましょう。
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>
ページが遅くなる大きな原因は画像なので、あらかじめ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>
この記述を設置したい場所に入れます。
次に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;
}
CSSはお好みで変更して頂いて大丈夫です。フォントや色など自分好みに変更するのも可能です。
必要な記述は以上です。完成したデモはこちらです。
いかがでしょうか？デモをリロードしてあげると1回目とローディングのスピードが違いますね。
これはブラウザにキャッシュが保存され読み込み時間が短くなっているせいです。また1から見たい場合はブラウザのキャッシュを消してあげて下さい。
気になる対応ブラウザですが、Firefox,Chrome,Safari,Operaで動作確認済みです。
IEでは画像サイズの高さ、幅が取得されずおかしく表示されてしまうので別途で画像サイズを指定してあげる必要がありそうですね。
以上ウェブラボ技術メモでした。