Ako bi rollover pravili na taj nacin (pomocu javascripta), evo sta bi bio prvi pokusaj:
Code (html):
<a href="whatever.htm" onmouseover="document.images['example'].src='3.gif'" onmouseout=
"document.images['example'].src='1.gif'"><img src="1.gif" name="example"></a>
i to bi radilo, ali sa jednim "malim" problemom, kada prvi put hoverujes taj link browser bi tek tada poslao zahtev za 3.gif (jer pre toga nije "cuo" za taj resurs) i za to vreme dok browser posalje request, server ga obradi i odgovori i dok browser ucita sliku (3.gif) tebi ce se prikazati "prazna slika" na neki delic sekunde, ili vise (u zavisnosti od brzine konekcije).
e da se to ne bi desilo, potrebno je da ucitamo hover sliku sto je ranije moguce, tako da je browser vec ima u cacheu kada bude rebao da je prikaze po prvi put.
to najjednostavnije mozemo da uradimo pomocu Image javascript objekta:
Code (javascript):
new Image.src = '3.gif';
ovde smo kreirali novu instancu Image objekta (
new Image) i
src atributu te instance smo dodelili vrednost
3.gif. Image objekat funkcionise tako da kada mu se promeni src odmah salje upit serveru (na url koji odgovara vrednosti src atributa) i dovucenu sliku drzi u memoriji tako da bude spremna za prikazivanje kada to bude bilo potrebno.
Znaci html kod nam sada izgleda ovako:
Code (html):
<script type="text/javascript">new Image.src = '3.gif';
</script>
<a href="whatever.htm" onmouseover="document.images['example'].src='3.gif'" onmouseout=
"document.images['example'].src='1.gif'"><img src="1.gif" name="example"></a>
i ovim smo se resili problema "prazne slike".
kod koji si ti dao radi to isto, samo jos i nepotrebno ucitava 1.gif, on ce vec biti ucitan kada browser naidje na <img /> element (koji u oop metodologiji mozemo da posmatramo kao podklasu Image objekta, tj DOM objekat koji odgovara <img /> elementu ima istu funkcionalnost kao Image objekat).
E sad, to bi bilo to o js preloaderu, ali rollover je najbolje uraditi sa nekom css tehnikom, jer ce to da radi i u onim browserima koji ne podrzavaju javascript (kojih vise i nema, da budemo realni) kao i u browserima koji podrzavaju javascript ali su ga korisnici disableovali (kojih ipak ima dovoljno da valja misliti i na njih).
Sto se konkretno Image objekta tice, ja sam ga koristio samo kada sam pisao skriptu za serviranje banera pa mi je trebao jednostavan nacin da zabelezim impresiju, npr:
Code:
new Image.src = 'http://example.com/track_view?id=123456789abcdef&ts=' + +new Date;
to lepo posalje GET upit serveru koji uredno vrati 204 odgovor (tj no content). Ispostavilo se da je koriscenje Image objekta za tu namenu pun pogodak..