En stor grund til at bruge billedforudindlæsning er, hvis du vil bruge et billede til baggrundsbillede af et element på en mouseOver eller: hover-begivenhed. Hvis du kun anvender dette baggrundsbillede i CSS til tilstanden: svæver, indlæses billedet ikke før den første: svæver-begivenhed, og der vil således være en kort irriterende forsinkelse mellem musen, der går over det område, og billedet faktisk vises .
Teknik nr. 1
Indlæs billedet i elementets normale tilstand, flyt det kun væk med baggrundsposition. Flyt derefter baggrundspositionen for at få den vist på markøren.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Teknik # 2
Hvis det pågældende element allerede har et baggrundsbillede anvendt, og du skal ændre det billede, fungerer ovenstående ikke. Typisk vil du gå efter en sprite her (et kombineret baggrundsbillede) og bare flytte baggrundspositionen. Men hvis det ikke er muligt, så prøv dette. Anvend baggrundsbilledet på et andet sideelement, der allerede er i brug, men ikke har et baggrundsbillede.
#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 at oprette nye sideelementer, der skal bruges til denne forudindlæsningsteknik, kan komme ind i dit hoved, som # preload-001, # preload-002, men det er snarere imod ånden i webstandarder. Derfor brugen af sideelementer, der allerede findes på din side.
Jeg havde ideen til at prøve at bruge det samme element, brug kun: efter pseduo-klasse for at indlæse billedet, så du behøvede ikke at stole på, at der var nok fremmede baggrundsfrie billeder på din side til at arbejde med, men af en eller anden grund ikke ønskede at forudindlæse dem ordentligt.
Mere
Tjek denne artikel for nogle flere teknikker, herunder JavaScript.