画像読込の進捗具合が分かるプログレスバーを作成

タイトルの通りです。読み込み中の画像を表示しないようにし、かつ画像読込の進捗度を表示してみます。
サンプルコードの実行結果はこちら
サンプルコードをみると、画像は１００枚ほど読み込みますが、ブラウザへの負担が大きいので、実際に読み込む画像は１０枚にしてあります。

今回使用したプラグイン
・imagesloaded

@charset "UTF-8";

    *{margin:0;padding:0;}

    .seqPhoto {
        background:
        /*    url(img/seq/IMG_2960.MOV_000000000.jpg) 
        */    
        no-repeat 0% 0%;
        
        background-size:cover;
        width:100%;
        height:100%;
        position:absolute;}

    .seqPhoto img {
        position:absolute;
        z-index: -1;}

    .progress{
        background-color:blue;
        color:white;
        width:100%;
        height:100%;
        position:absolute;}

    .progressBar{
        width:0%;
        border-top:4px solid white;
		position:absolute;
        top:50%;}

    .progressText{
        width:100%;
        font-family:"メイリオ","Menlo","Consolas";
        font-size:16px;
        text-align:center;
        margin-top:10px;
        position:absolute;
        top:50%;}

    .progressDone .progressBar{
        border-top-color:white;
    }

@charset "UTF-8";

*{margin:0;padding:0;}

.seqPhoto {

background:

/* url(img/seq/IMG_2960.MOV_000000000.jpg)

no-repeat 0% 0%;

background-size:cover;

width:100%;

height:100%;

position:absolute;}

.seqPhoto img {

position:absolute;

z-index: -1;}

.progress{

background-color:blue;

color:white;

width:100%;

height:100%;

position:absolute;}

.progressBar{

width:0%;

border-top:4px solid white;

position:absolute;

top:50%;}

.progressText{

width:100%;

font-family:"メイリオ","Menlo","Consolas";

font-size:16px;

text-align:center;

margin-top:10px;

position:absolute;

top:50%;}

.progressDone .progressBar{

border-top-color:white;

}

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>
    
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="js/progressBar.js"></script>

</head>
<body>
<div class="progress" id="progress">
    <span class="progressBar"></span>
    <span class="progressText">0%</span>
</div>
<div class="seqPhoto">
    <img src="img/seq/IMG_2960.MOV_000000000.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000001.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000002.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000003.jpg" alt=""width="1137" height="640" >
    <img src="img/seq/IMG_2960.MOV_000000004.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000005.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000006.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000007.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000008.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000009.jpg" alt="" width="1137" height="640">
<!--    <img src="img/seq/IMG_2960.MOV_000000010.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000011.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000012.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000013.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000014.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000015.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000016.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000017.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000018.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000019.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000020.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000021.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000022.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000023.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000024.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000025.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000026.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000027.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000028.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000029.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000030.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000031.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000032.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000033.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000034.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000035.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000036.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000037.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000038.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000039.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000040.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000041.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000042.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000043.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000044.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000045.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000046.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000047.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000048.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000049.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000050.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000051.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000052.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000053.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000054.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000055.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000056.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000057.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000058.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000059.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000060.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000061.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000062.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000063.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000064.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000065.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000066.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000067.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000068.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000069.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000070.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000071.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000072.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000073.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000074.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000075.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000076.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000077.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000078.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000079.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000080.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000081.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000082.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000083.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000084.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000085.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000086.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000087.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000088.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000089.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000090.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000091.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000092.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000093.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000094.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000095.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000096.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000097.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000098.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000099.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000100.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000101.jpg" alt="" width="1137" height="640">
    <img src="img/seq/IMG_2960.MOV_000000102.jpg" alt="" width="1137" height="640">
 -->
</div>


</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!doctype html>

<html>

<head>

</head>

<body>

</div>

<!-- <img src="img/seq/IMG_2960.MOV_000000010.jpg" alt="" width="1137" height="640">

-->

</div>

</body>

</html>

progressBar.js

$(function(){

    showProgress();
    
    function showProgress(){
        var 
        $container    = $("#progress"),
        $progressBar  = $container.find(".progressBar"),
        $progressText = $container.find(".progressText"),
        
        // imagesLoadedオブジェクトを作成して格納
        imgLoad  = imagesLoaded("body"),
            
        // body全体の画像の枚数を格納
        imgTotal = imgLoad.images.length,
            
        //読み込んだ画像の枚数を格納
        imgLoaded = 0,
            
        //プログレスバー現在地に相当する値を格納( =画像読込進捗度)
        current   = 0,
        
        // 1秒当たり20回の頻度で読込状況をチェック
        progressTimer = setInterval( updateProgress, 1000/20 );
        
        /*
            変数imagesLoadedを使い、
            画像が読み込まれるごとにカウンターを１加算
            
            imagesLoadedオブジェクトでは、1枚の画像が読込完了すると、
            「progress」イベントが発生します。このイベントを使って
            変数imgLoadedの値を変更
        */
        imgLoad.on("progress",function(){
            imgLoaded++;
        });
        
        function updateProgress(){
            
            var
            
            // 読込完了画像数 / 全体画像数 
            target = ( imgLoaded / imgTotal ) * 100;
            
            /* 
                progressバーの幅を格納する変数currentに
                値を徐々に加算するために *0.1としている
                - currentとしているのは、今回の増分だけを
                計算するためです。
            */
            current += ( target - current ) * 0.1;

            //  progressバーの幅と進捗度の数値を更新する
            $progressBar.css({ width: current + "%" });
            $progressText.text( Math.floor( current ) + "%");
            
            //進捗度が100%以上
            if( current >= 100 ){
                
                //　updateProgressを呼ばないようにタイマー停止
                clearInterval( progressTimer );
                
                //　class="progressDone"を追加
                $container.addClass(".progressDone");
                
                /*
                    add()メソッドは、選択しているjQueryオブジェクトに
                    さらに新たなjQueryオブジェクトを追加します。
                    
                    変数$progressBar
                    変数$progressTextの２つを１つの
                    jQueryオブジェクトとして扱うようにしてます。
                    
                    その後、delay()で 0.5秒は待機させて
                    アニメーションの開始を遅らせます。
                    
                    animate()の中にfunction(){animate...}となっていますが
                    この中の方のanimate()は外側のanimate() が完了したら
                    呼び出されます。
                */
                $progressBar.add( $progressText )
                    .delay(500)
                    //文字列「100%」が消えるアニメーション
                    .animate({ opacity:0 },300,function(){

                            // 青色のオーバーレイを上へスライドさせる
                            $container.animate({
                                top:"-100%"
                            },1000,"easeInOutQuint");
                    });
                }
            
            /*
                イージングを使用すると100にならないため
                「ほぼ」100なら100とする処理
            */
            if( current > 99.9 ) current = 100;
        }
    }
});

100

$(function(){

showProgress();

function showProgress(){

var

$container = $("#progress"),

$progressBar = $container.find(".progressBar"),

$progressText = $container.find(".progressText"),

// imagesLoadedオブジェクトを作成して格納

imgLoad = imagesLoaded("body"),

// body全体の画像の枚数を格納

imgTotal = imgLoad.images.length,

//読み込んだ画像の枚数を格納

imgLoaded = 0,

//プログレスバー現在地に相当する値を格納( =画像読込進捗度)

current = 0,

// 1秒当たり20回の頻度で読込状況をチェック

progressTimer = setInterval( updateProgress, 1000/20 );

変数imagesLoadedを使い、

画像が読み込まれるごとにカウンターを１加算

imagesLoadedオブジェクトでは、1枚の画像が読込完了すると、

「progress」イベントが発生します。このイベントを使って

変数imgLoadedの値を変更

imgLoad.on("progress",function(){

imgLoaded++;

});

function updateProgress(){

var

// 読込完了画像数 / 全体画像数

target = ( imgLoaded / imgTotal ) * 100;

progressバーの幅を格納する変数currentに

値を徐々に加算するために *0.1としている

- currentとしているのは、今回の増分だけを

計算するためです。

current += ( target - current ) * 0.1;

// progressバーの幅と進捗度の数値を更新する

$progressBar.css({ width: current + "%" });

$progressText.text( Math.floor( current ) + "%");

//進捗度が100%以上

if( current >= 100 ){

//　updateProgressを呼ばないようにタイマー停止

clearInterval( progressTimer );

//　class="progressDone"を追加

$container.addClass(".progressDone");

add()メソッドは、選択しているjQueryオブジェクトに

さらに新たなjQueryオブジェクトを追加します。

変数$progressBar

変数$progressTextの２つを１つの

jQueryオブジェクトとして扱うようにしてます。

その後、delay()で 0.5秒は待機させて

アニメーションの開始を遅らせます。

animate()の中にfunction(){animate...}となっていますが

この中の方のanimate()は外側のanimate() が完了したら

呼び出されます。

$progressBar.add( $progressText )

.delay(500)

//文字列「100%」が消えるアニメーション

.animate({ opacity:0 },300,function(){

// 青色のオーバーレイを上へスライドさせる

$container.animate({

top:"-100%"

},1000,"easeInOutQuint");

});

}

イージングを使用すると100にならないため

「ほぼ」100なら100とする処理

if( current > 99.9 ) current = 100;

}

});