Il preload delle immagini di sfondo è una tecnica comune nei CSS. In questo articolo vedremo due approcci diversi a questa tecnica.
Primo approccio
Il primo approccio consiste nel nascondere l'immagine di sfondo e di mostrarla quando necessario:
#test {
background: url(image.png) no-repeat -9999px -9999px;
}
#test:hover {
background-position: 0 0;
}
L'immagine viene inizialmente nascosta utilizzando valori negativi per gli assi X ed Y della proprietà background-position.
Secondo approccio
Il secondo approccio è simile al primo, ma in questo caso viene utilizzato il contenuto generato:
#test:before {
content: url(image.png);
width: 0px;
height: 0px;
overflow: hidden;
visibility: hidden;
}
#test:hover {
background: url(image.png) no-repeat 0 0;
}
Anche in questo caso l'immagine viene messa in cache dal browser ed usata quando è necessario.