En stor grunn til å bruke forhåndsinnlasting av bilder er hvis du vil bruke et bilde til bakgrunnsbildet til et element på en mouseOver eller: hover-hendelse. Hvis du bare bruker det bakgrunnsbildet i CSS for: hover-tilstanden, lastes ikke dette bildet før den første: hover-hendelsen, og dermed vil det være en kort irriterende forsinkelse mellom musen som går over det området og bildet faktisk vises .
Teknikk # 1
Last inn bildet i elementets vanlige tilstand, bare flytt det med bakgrunnsposisjon. Flytt deretter bakgrunnsposisjonen for å vise den på markøren.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Teknikk # 2
Hvis elementet i spørsmålet allerede har et bakgrunnsbilde brukt, og du må endre det bildet, fungerer ikke ovenstående. Vanligvis vil du gå etter en sprite her (et kombinert bakgrunnsbilde) og bare flytte bakgrunnsposisjonen. Men hvis det ikke er mulig, prøv dette. Bruk bakgrunnsbildet på et annet sideelement som allerede er i bruk, men som ikke har et bakgrunnsbilde.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Ideen om å lage nye sideelementer som kan brukes til denne forhåndslasteteknikken, kan komme inn i hodet ditt, som # preload-001, # preload-002, men det er heller mot ånden fra webstandarder. Derav bruk av sideelementer som allerede finnes på siden din.
Jeg hadde ideen om å prøve å bruke det samme elementet, bare bruk: etter pseduo-klasse for å laste inn bildet, slik at du ikke trengte å stole på at det var nok fremmede bakgrunnsfrie bilder på siden din til å jobbe med, men av en eller annen grunn ikke ønsket å forhåndslaste dem ordentlig.
Mer
Sjekk denne artikkelen for flere teknikker, inkludert JavaScript.