La procedura per stabilire se anche le immagini di sfondo sono state caricate richiede in JavaScript solo un passaggio in più.
Possiamo definire la seguente funzione di utility:
var preloadBackgrounds = function( elements ) {
var elems = document.querySelectorAll( elements );
var imgs = []; // Array di immagini
var loaded = false; // Status
for( var i = 0; i < elems.length; ++i ) {
var elem = elems[i];
var bgImage = window.getComputedStyle( elem, null ).getPropertyValue( "background-image" );
var bgImageUrl = bgImage.replace( "url( ", "" ).replace( ")", "" ).replace( '"', "" ).replace( "'", "" );
if ( /(\.jpg|\.jpeg|\.png)$/.test( bgImageUrl ) ) {
// Creo un elemento img dall'URL
var imgBg = document.createElement( "img" );
imgBg.src = bgImageUrl;
// Popolo l'array
imgs.push( imgBg );
}
}
// Ci sono immagini di sfondo?
if( imgs.length > 0 ) {
var n = 0;
for( var j = 0; j < imgs.length; ++j ) {
var currentImg = imgs[j];
currentImg.addEventListener( "load", function() {
// L'immagine è stata caricata?
if( this.complete ) {
n++;
}
}, false);
}
if( n == imgs.length ) {
loaded = true; // Cambio lo status
}
} else {
loaded = true; // Non ci sono immagini, quindi restituisco true
}
return loaded;
};