En stor anledning att använda förinstallering av bilder är om du vill använda en bild för bakgrundsbilden av ett element på en mouseOver eller: hover-händelse. Om du bara använder den bakgrundsbilden i CSS för: svävar-tillståndet laddas bilden inte förrän den första: svävarhändelsen och därmed blir det en kort irriterande fördröjning mellan musen som går över det området och bilden faktiskt dyker upp .
Teknik # 1
Ladda bilden i elementets vanliga tillstånd, för bara bort den med bakgrundsposition. Flytta sedan bakgrundspositionen för att visa den i svävningen.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Teknik # 2
Om elementet i fråga redan har en bakgrundsbild tillämpad och du måste ändra den bilden fungerar ovanstående inte. Vanligtvis skulle du välja en sprite här (en kombinerad bakgrundsbild) och bara flytta bakgrundspositionen. Men om det inte är möjligt, prova det här. Applicera bakgrundsbilden på ett annat sidelement som redan används, men som inte har en bakgrundsbild.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Idén att skapa nya sidelement som kan användas för denna förinladdningsteknik kan komma in i ditt huvud, som # preload-001, # preload-002, men det är snarare emot andan av webbstandarder. Därav användningen av sidelement som redan finns på din sida.
Jag hade idén att försöka använda samma element, använd bara: efter pseduo-klass för att ladda bilden så att du inte behövde lita på att det finns tillräckligt med ovanliga bakgrundsfria bilder på din sida att arbeta med, men av någon anledning ville inte förspela dem ordentligt.
Mer
Kolla in den här artikeln för några fler tekniker, inklusive JavaScript.