Velik razlog za uporabo prednalaganja slike je, če želite uporabiti sliko za sliko ozadja elementa na dogodku mouseOver ali: hover. Če to sliko ozadja v CSS uporabite samo za stanje: hover, se ta slika ne naloži do prvega dogodka: hover in tako bo med miško, ki gre čez to območje, in sliko, ki se dejansko prikaže, prišlo do krajše nadležne zamude. .
Tehnika # 1
Sliko naložite v običajno stanje elementa, le premaknite jo s položajem ozadja. Nato premaknite položaj ozadja, da ga prikažete pri premikanju miške.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Tehnika # 2
Če ima zadevni element že uporabljeno sliko ozadja in jo morate spremeniti, zgornja ne bo delovala. Običajno bi tukaj izbrali sprite (kombinirana slika za ozadje) in samo premaknili položaj ozadja. Če pa to ni mogoče, poskusite to. Uporabite sliko ozadja na drug element strani, ki je že v uporabi, vendar nima slike ozadja.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Ideja o ustvarjanju novih elementov strani, ki jih boste uporabili za to tehniko prednalaganja, se vam lahko pojavi v glavi, na primer # preload-001, # preload-002, vendar je to v nasprotju z duhom spletnih standardov. Zato uporaba elementov strani, ki že obstajajo na vaši strani.
Zamislil sem se, da bi poskusil uporabiti isti element, za nalaganje slike uporabim le: after pseduo-class, zato se vam ni bilo treba zanašati na to, da je na vaši strani dovolj tujih slik brez ozadja, s katerimi lahko delate, vendar jih iz kakršnega koli razloga nisem hotel pravilno prednaložiti.
Več
V tem članku si oglejte še nekaj tehnik, vključno z JavaScriptom.