jquery - 从脚本加载背景图像时jQuery中的进度条

Question

我有一个脚本以这种方式将大图像加载到正文中：

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

我正在寻找一个每次更改背景图像时都会运行的进度条脚本，而无需重新加载单个页面。

我目前正在将 Twitter BootStrap 与 jQuery 结合使用。

提前感谢您提供任何有价值的信息。

干杯:)

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/