Preload di immagini in poche righe di CSS.
Scritto da:
Quello del preload delle immagini (assieme al concetto di lazy loading) è un tema assai discusso. In rete esistono diverse soluzioni e liberie per la gestione del precaricamento delle immagini all’avvio di un sito web.
Nel progetto sul quale sto lavorando (su cui farò un articolo dedicato) ho potuto verificare il caso in cui un’immagine con la proprietà display:none non viene caricata (comportamento verificato su Chrome). Questo è un utile metodo che ha il browser per non appesantire la rete del client quando le immagini sono invisibili. Per il 99% dei casi è una strategia ottimamente funzionale.
Ma c’è un caso in cui il preload delle immagini invisibili è un requisito inevitabile. Ad esempio, se è necessario mostrare un’immagine al passaggio del mouse (e quindi passa dalla proprietà display:none a display:block) è sempre consigliato precaricare l’immagine già dallo stato “invisibile” al fine di non ottenere un layout-glitch nel momento in cui il browser carica l’immagine.
La soluzione più testata è utilizzare una classe di preload in CSS.
.preload {
content: url("1.jpg") url("2.jpg") url("3.jpg") url("4.jpg");
width: 0px;
height: 0px;
position: absolute;
}Notare l’assenza della proprietà display:none, sostituita con width e height settati a 0px, unico modo per “ingannare” il browser che l’immagine esiste e deve essere caricata, mantenendo la sua invisilità. La position: absolute è solo per far “uscire” l’elemento dal layout della pagina ma non è essenziale all’obiettivo di preloading, puoi usare altre proprietà.
Il passaggio successivo è dichiarare un qualsiasi elemento HTML con quella classe.
<div class="preload"></div>Spero che questa soluzione risulti utile. Io la uso molto spesso senza alcun problema.