Preload slika uz pomoć CSS-a

Šta je preload slika i za šta se koristi?

Ukoliko ste dizajnirali web aplikaciju koja koristi slike kao dugmiće sa hover promenom slike sigurno ste zapazili kako prelazni efekat "laguje" što znatno umanjuje efekat koji ste želeli da postignete. Ovo se javlja iz razloga što svaki put kada se desi hover event browser šalje request serveru, koji ponovo skida celu sliku što dovodi do pomenutog laga i nepotrebnog korišćenja bandwidth-a.
Da bi smo ovo izbegli koristimo preload slika koji se može izvršiti na 2 načina, preko JavaScript-a ili primenom CSS-a.
JavaScript način je nešto komplikovaniji i neće raditi kod onih kojima je JavaScript isključen (ako još postoje takvi).
Evo kako to da izvedemo pomoću CSS-a:









A klasa će izgledati ovako:
.preload
{
display: none;
}

Prosto a korisno!