Jedan od velikih razloga za korištenje predučitavanja slike je ako želite koristiti sliku za pozadinsku sliku elementa na događaju mouseOver ili: hover. Ako tu pozadinsku sliku primijenite samo u CSS-u za stanje: hover, ta se slika neće učitati do prvog: hover događaja i time će doći do kratkog neugodnog kašnjenja između miša koji prelazi to područje i slike koja se stvarno prikazuje .
Tehnika # 1
Učitajte sliku u normalno stanje elementa, samo je pomaknite s položajem pozadine. Zatim pomaknite položaj pozadine da biste ga prikazali pri zadržavanju.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Tehnika # 2
Ako je za predmetni element već primijenjena pozadinska slika i morate je promijeniti, gornje neće uspjeti. Uobičajeno je da ovdje odaberete sprite (kombiniranu pozadinsku sliku) i samo pomaknete položaj pozadine. Ali ako to nije moguće, pokušajte ovo. Primijenite pozadinsku sliku na drugi element stranice koji se već koristi, ali nema pozadinsku sliku.
#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 stvaranju novih elemenata stranice koje ćete koristiti za ovu tehniku predopterećenja može vam se pojaviti u glavi, poput # preload-001, # preload-002, ali to je prilično protiv duha web standarda. Stoga se koriste elementi stranice koji već postoje na vašoj stranici.
Imao sam ideju da pokušam koristiti isti element, za učitavanje slike upotrijebite samo: after pseduo-class, tako da se niste trebali pouzdati u to da na vašoj stranici ima dovoljno stranih slika bez pozadine za rad, ali iz bilo kojeg razloga nije ih želio pravilno unaprijed učitati.
Više
U ovom članku potražite još nekih tehnika, uključujući JavaScript.