Индикатор выполнения в jQuery при загрузке фонового изображения из скрипта - PullRequest
Новая
       39

Индикатор выполнения в jQuery при загрузке фонового изображения из скрипта

2 голосов
/ 02 апреля 2012

У меня есть скрипт, который загружает большие изображения в тело таким образом: 

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

Я ищу скрипт индикатора выполнения, который запускается при каждом изменении фонового изображения без перезагрузки одной страницы.

В настоящее время я использую Twitter BootStrap в сочетании с jQuery.

Заранее благодарим за любую ценную информацию.

Приветствия:)

1 Ответ

0 голосов
/ 02 апреля 2012

Как-то так?

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/

...