jquery - スクリプトから background-image を読み込むときの jQuery の進行状況バー

Question

この方法で大きな画像を本体にロードするスクリプトがあります:

$('body').css("background-image", "url(pics/jpg/folio/" + TtempID + ".jpg)");

背景画像が変更されるたびに、ページを 1 回もリロードせずに実行されるプログレス バー スクリプトを探しています。

現在、jQuery と組み合わせて Twitter BootStrap を使用しています。

貴重な情報をお寄せいただきありがとうございます。

乾杯 ：）

Answer 1

このようなもの ？

jQuery

function loadBackground(image) {
    $('body').addClass('loading');
    var img = new Image();
    img.onload = function() {
        $('body').css({
            'background-image': 'url(pics/jpg/folio/" + image + ".jpg)'
        }).removeClass('loading');
    };

    img.src = url;
}

CSS

.loading:after{
    content:' ';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:url('PATH-TO-LOADING-IMAGE') 50% 50% no-repeat;
    z-index:1000;
    background-color:rgba(0,0,0,0.3);
}

のように使う

    loadBackground( TtempID );

http://jsfiddle.net/gaby/CYFNc/2/のデモ