JavaScript/jQueryでローディングバー・プログレスバーを表示させて読み込み処理を行う(imagesLoadedの使い方)

JavaScript/jQueryでローディングバー・プログレスバーを表示させて読み込み処理を行うには「imagesLoaded」というライブラリを使用して、htmlにある画像の読み込み状況を監視します。

→ デモはこちら

imagesLoadedの使用方法

まず、プログレス処理を行ないたいページに「jQuery」と「imagesLoaded」を読み込ませます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="imagesloaded.js"></script>

次にcssでプログレスバーの設定を行ないます。

#progress {
　width: 300px;
　height: 20px;
}
#progressBar {
　width: 0;
　height: 20px;
　background-color: red;
}

プログレスバーのHTMLは以下になります。

そして、メインのプログレス処理を行うプログラムになります。

$(function(){

　// bodyの画像数を取得
　var imgNum = imagesLoaded('body').images.length;

　// 読み込んだ画像の数を格納
　var loadedImg = 0;

　// 現在のプログレス値を格納
　var progressNowPosition = 0;

　// 1秒間に50回、progressMonitor()を実行する
　Timer = setInterval(progressMonitor, 1000/50);

　// 画像を読み込んだらloadedImgを加算する
　imagesLoaded('body').on('progress', function(){
　　loadedImg++;
　});

　// 画像の読み込み状況をチェックし、更新する関数
　function progressMonitor(){

　　// 読み込んだ画像のパーセンテージ
　　var progressPosition = (loadedImg/imgNum) * 100;

　　// プログレス値を現在値と目標値からイージングする
　　progressNowPosition += (progressPosition-progressNowPosition) * 0.1;		

　　// プログレスバーの横幅を指定する
　　$('#progressBar').css('width', progressNowPosition+'%');

　　// 読み込んだ画像のパーセンテージ数値を表示する
　　$('#progressTxt').text(Math.floor(progressNowPosition)+'%');

　　// 読み込みが完了した場合の処理
　　if(progressNowPosition >= 100){
　　　clearInterval(Timer);
　　　$('#progress').fadeOut(1000, function(){
　　　　$('#imgBox').fadeIn(1000);
　　　});
　　}

　　// イージング計算を完了させる
　　if(progressNowPosition > 99.9){
　　　progressNowPosition = 100;
　　}

　}

});