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

Question

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

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

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

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

预先感谢您提供任何有值(value)的信息。

干杯:)

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/