jQueryでページ上に表示されるローディングのバーを作ってみる

カテゴリーから探す

年別から見る

2015/05/20

jQueryでページ上に表示されるローディングのバーを作ってみる

スマホのブラウザやYoutubeの動画のページなどで、
ページの上にロードの状況を知らせるバーを見かけます。

画像が多いなど、ページ全体のファイル容量が大きくなってくると、
ページの読み込みが完了するまでに少し時間がかかってしまうことがあります。

サイトを軽くするのが一番適切ですが、

それが難しい場合、このローディングのバーがあると、読み込み状況を知ることができて、

少しだけですが、不安が軽減されます。

スマホでWEBページを見るときはデフォルトのブラウザにこの表示があるので何もする必要はありませんが、
PCでも同様に表示したい時もあるかもしれません。

味の明太子博多中洲いとや
また、↑こちらのサイトのようにローディングバーをデザインの一部に取り込んでしまうのも面白いと思います。

今回は、こちらのサイトも参考に、このトップのローディングバーをjQueryを使って作ってみました。

↓こちらが作ってみたものです。

DEMO

※環境によっては一瞬しか表示されないので、見づらいかもしれません。

作り方

HTML


<body>
・・・

<div class="loadingBar"></div>
</body>

<body>

・・・

</body>

HTMLは、<body>の閉じタグの直前などに適当なクラス名をつけた<div>を用意します。

CSS


/*-- loading bar --*/
.loadingBar {
    width: 0;
    height: 4px;
    background: #03a7eb;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 0;
    left: 0;
    transition: all 0.2s linear 0s;
}

/*-- loading bar --*/

.loadingBar {

width: 0;

height: 4px;

background: #03a7eb;

box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);

position: fixed;

top: 0;

left: 0;

transition: all 0.2s linear 0s;

}

HTMLで設置した<div>に対して、上記のようなスタイルを設定します。

ポイントは、position:fixで設置することと、widthを0にしておくことです。

さらにtransitionを設定しておくと、動作が滑らかになります。

jQuery(JavaScript)


$(function() {
    var loadCount = 0, //loading状況の初期化
        imgLength = $("img").size(); //読み込む画像の数を取得
    $("img").each(function() {
        var src = $(this).attr("src");
        $("<img>")
            .attr("src", src)
            .load(function() {
                loadCount++; //画像が読み込まれたら、loading状況を更新
            });
    });

    var timer = setInterval(function() { //一定間隔でloading状況をローディングバーに反映
        $(".loadingBar").css({
            "width": (loadCount / imgLength) * 100 + "%" //読み込まれた画像の数を画像全体で割り、%としてローディングバーのwidthに設定
        });
        if((loadCount / imgLength) * 100 == 100){ //100%読み込まれたらローディングバーを隠す
            clearInterval(timer);
            $(".loadingBar").delay(200).animate({
                "opacity": 0
            }, 200);
        }
    }, 5);
});

$(function() {

var loadCount = 0, //loading状況の初期化

imgLength = $("img").size(); //読み込む画像の数を取得

$("img").each(function() {

var src = $(this).attr("src");

$("<img>")

.attr("src", src)

.load(function() {

loadCount++; //画像が読み込まれたら、loading状況を更新

});

var timer = setInterval(function() { //一定間隔でloading状況をローディングバーに反映

$(".loadingBar").css({

"width": (loadCount / imgLength) * 100 + "%" //読み込まれた画像の数を画像全体で割り、%としてローディングバーのwidthに設定

});

if((loadCount / imgLength) * 100 == 100){ //100%読み込まれたらローディングバーを隠す

clearInterval(timer);

$(".loadingBar").delay(200).animate({

"opacity": 0

}, 200);

}

}, 5);

});

今回は容量が大きくなることの多い画像をローディングの対象としました。

通常のサイトではこちらの方法で問題無いと思います。

まず、ページ内の<img>の数を取得し、それが全部読み込まれた状態を100%とします。


$("<img>")
    .attr("src", src)
    .load(function() {
    loadCount++; //画像が読み込まれたら、loading状況を更新
});

$("<img>")

.attr("src", src)

.load(function() {

loadCount++; //画像が読み込まれたら、loading状況を更新

});

↑こちらで読み込まれた画像の状況を更新しています。

読み込まれた状況はsetInterval()ですべての画像が読み込まれるまで、

一定の間隔でローディングバーのwidthとして反映します。


var timer = setInterval(function() {
    $(".loadingBar").css({
        "width": (loadCount / imgLength) * 100 + "%"
    });
    if((loadCount / imgLength) * 100 == 100){
        clearInterval(timer);
        $(".loadingBar").delay(200).animate({
            "opacity": 0
        }, 200);
    }
}, 5);