Come posso verificare se le immagini di sfondo sono state caricate con JavaScript?

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