Uno dei motivi principali per utilizzare il precaricamento dell'immagine è se si desidera utilizzare un'immagine per l'immagine di sfondo di un elemento su un evento mouseOver o: hover. Se applichi solo quell'immagine di sfondo nel CSS per lo stato: hover, quell'immagine non verrà caricata fino al primo evento: hover e quindi ci sarà un breve fastidioso ritardo tra il passaggio del mouse su quell'area e l'immagine effettivamente visualizzata .
Tecnica n. 1
Carica l'immagine nello stato normale dell'elemento, spostala solo con la posizione dello sfondo. Quindi sposta la posizione dello sfondo per visualizzarlo al passaggio del mouse.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Tecnica n. 2
Se l'elemento in questione ha già un'immagine di sfondo applicata ed è necessario modificare quell'immagine, quanto sopra non funzionerà. In genere scegli uno sprite qui (un'immagine di sfondo combinata) e sposti semplicemente la posizione dello sfondo. Ma se non è possibile, prova questo. Applica l'immagine di sfondo a un altro elemento della pagina che è già in uso, ma non ha un'immagine di sfondo.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )L'idea di creare nuovi elementi di pagina da utilizzare per questa tecnica di precaricamento potrebbe venirti in mente, come # preload-001, # preload-002, ma è piuttosto contro lo spirito degli standard web. Da qui l'utilizzo di elementi di pagina già esistenti sulla tua pagina.
Ho avuto l'idea di provare e utilizzare lo stesso elemento, utilizzare solo la classe: after pseduo per caricare l'immagine, quindi non era necessario fare affidamento sul fatto che sulla tua pagina ci fossero abbastanza immagini estranee senza sfondo con cui lavorare, ma per qualsiasi motivo non volevo precaricarli correttamente.
Di più
Controlla questo articolo per altre tecniche, incluso JavaScript.