Fortschrittsbalken in jQuery beim Laden von Hintergrund-Bild von Skript

Question

Ich habe ein Skript, die großen Bilder in den Körper auf diese Weise lädt:

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

Ich suche einen Fortschrittsbalken-Skript, das jedes Mal das laufen würde Das Hintergrundbild wird geändert, ohne dass eine einzelne Seite neu geladen wird.

Ich verwende derzeit Twitter BootStrap in Verbindung mit jQuery.

Vielen Dank im Voraus für jede wertvolle Information.

Prost :)

Answer 1

So ähnlich?

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); 
} 

Verwenden Sie es wie

loadBackground(TtempID); 

Demo bei http://jsfiddle.net/gaby/CYFNc/2/