Se il preload delle immagini di un sito è operazione relativamente semplice (bastano poche righe di javascript), altrettanto non si può dire degli sfondi caricati attraverso css, che il browser richiama in run-time. Un "trucco" ci aiuta a risolvere il problema.
Ecco un "trucco" (termine obsoleto, the new is "workaround" 
) per pre-caricare le immagini di sfondo dichiarate nei css.
Per capirci intendiamo situazioni come questa:
.conferma_3:hover
{
background-image:url(assets/img/sfondo-conferma3.jpg);
}
Il problema in questo caso è che il browser richiamerà l'immagine di sfondo solo quando necessario, il che -in questo caso- si traduce in una chiamata sull'evento del mouseover. Se il server non restituisce subito l'immagine, o se questa "pesa", l'utente si trova lo sgradevole effetto di non visualizzare immediatamente la situazione corretta al passaggio del mouse.
Altro caso in cui si desidera pre-caricare subito gli sfondi è quello in cui si vuol restituire al browser tutte le immagini in modo che possa continuare a lavorare anche se dovesse cadere la connessione web.
La soluzione è quella di creare un div che utilizza come sfondo l'immagine desiderata, ma che non la visualizza nel browser:
<div style="background: url(assets/img/sfondo-conferma3.jpg) no-repeat -9999px -9999px;">
grazie all'attributo della posizione (-9999px) facciamo in modo che il div non venga visualizzato dal browser ma venga comunque elaborato e quindi lo sfondo venga scaricato in cache. Da quel momento in poi sarà disponibile anche per le altre classi.
Ricordo che, se invece necessitiamo di pre-caricare le immagini contenute nei tag html "<img src...>", possiamo risolvere con un semplice javascript in head:
var images = [];
function preload() {
for (var i = 0; i < arguments.length; i++) {
images[i] = new Image();
images[i].src =preload.arguments[i];
}
}
preload( //inserire i percorsi delle immagini da caricare
'img/enigmi/cover/suggerimenti_cover/1.png',
'img/enigmi/cover/suggerimenti_cover/2.png',
'img/enigmi/cover/suggerimenti_cover/3.png'
);
Se preferite potete utilizzare path assolute.