Infocurci - programmatore Php Roma
Infocurci - programmatore Php Roma
"faster than 98% of all tested websites" (tools.pingdom.com) - 100/100 Google PageSpeed Insights - Benvenuti :)

Cms / framework : Preload di immagini da css

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.

Cms / framework

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.