Prednalaganje slik

Nekatere slike potrebujejo malo več časa, da se naložijo s spletnega strežnika. Če se oblikuje stran, pri kateri se slike odzovejo na uporabnikova dejanja, potem se običajno pričakuje kar se da hiter odziv, kot so ga uporabniki vajeni v ostalih multimedijskih aplikacijah. Čakanje na slike lahko povzroči precejšno zmanjšanje uporabnikovega uživanja na straneh.

JavaScript priskoči na pomoč z omogočanjem skript, ki naložijo slike v brskalnikovo spominsko zalogo brez prikaza. Takšno tehniko imenujemo prednalaganje slik (precaching). Najboljša taktika prednalaganja slik je, da med nalaganjem strani naložimo slike v slikovno zalogo. Uporabniki raje ob začetnem nalaganju strani počakajo kako sekundo več, kot pa potem čakajo na menjavo slik, kot reakcijo na določen miškin premik.

Za prednalaganje slik je potrebno napraviti slikovni predmet v medpomnilniku. Takšen slikovni predmet, narejen v pomnilniku, se v določenih pogledih razlikuje od slikovnega predmeta narejenega z elementom <img> v kodi HTML. Predmeti, ki se nahajajo izključno v spominu, so narejeni s pomočjo skripta in niso vidni nikjer v dokumentu. Njihova navzočnost vseeno prisili brskalnik, da naloži te slike, med nalaganjem strani. Objektni model podaja konstruktor slikovnega predmeta za kreiranje spominskega tipa slikovnega predmeta kot:

var mojaslika = new Image(širina, višina)

Parametra konstruktorja sta širina in višina slike v pikslih. Te dimenzije se morajo ujemati z tistimi, podanimi v elementu <img>. Ko enkrat slikovni predmet obstaja v spominu, mu lahko pripišemo ime datoteke ali url v src lastnost tega predmeta:

mojaslika.src = "nekaj.gif"

Ko brskalnik naleti na stavek, ki pripiše url k lastnosti src slikovnega predmeta, potem naloži to sliko v slikovno zalogo. Vse kar uporabnik pri tem opazi, je samo dodatna informacija ob nalaganju v statusni vrstici, kot da bi bila slika nekje na strani. Po končanem nalaganju strani so vse slike, ustvarjene na takšen način, shranjene v slikovni zalogi. Sedaj se lahko priredi lastnosti src slikovnega predmeta v dokumentu lastnost src slikovnega predmeta v spominu:

document.images[0].src = mojaSlika.src

Zamenjava slike v dokumentu se tako zgodi v trenutku. Naslednji program je enostaven izpis za stran, ki vsebuje en element <img> in izbrano množico, ki omogoča zamenjavo slike v dokumentu za katerokoli izmed štirih prednaloženih slik (vključno z originalom, vpisanim v elementu <img>).

<html>
<head>
<title>slikovni predmet</title>
<script type="text/javascript">
// prednaloži štiri slike
slika1 = new Image(120,90)
slika1.src = "fotka1.gif"
slika2 = new Image(120,90)
slika2.src = "fotka2.gif"
slika3 = new Image(120,90)
slika3.src = "fotka3.gif"
slika4 = new Image(120,90)
slika4.src = "fotka4.gif"
// naloži sliko izbrano iz množice
function nalozi_ prednalozeno(seznam)
{
var img = seznam.options[seznam.selectedIndex].value
document.getElementById("slika").src = eval(img + ".src")
}
</script>
</head>
<body >
<h2>Slikovni predmet</h2>
<img src="fotka1.gif" id="slika" height="90" width="120" alt="neka slika" />
<form action="akcija.html">
<select name="cached" onchange="nalozi_prednalozeno(this)">
<option value="slika1">gimnazija</option>
<option value="slika2">tehniki</option>
<option value="slika3">poklicna</option>
<option value="slika4">odrasli</option>
</select>
</form>
</body>
</html>

Ko se stran naloži, se izvede nekaj stavkov takoj. Ti stavki kreirajo štiri nove spominske slikovne predmete in jim dodelijo imena datotek k lastnostim src. Te slike so naložene v slikovno zalogo med nalaganjem strani. Nižje v telesu dokumenta zasede element <img> svoj prostor na strani in naloži eno izmed slik kot začetno sliko.

Element select našteje uporabniku prijazna imena za slike, medtem ko so imena slikovnih predmetov že prednaložena v spominu. Ko uporabnik izbere emo možnost v sznamu, funkcija nalozi_prednalozeno() sliko (poišče pravo ime izbranega elementa). Da se spremenimo ime iz niza v sklic na predmet z istim imenom, je priporočljivo uporabiti funkcijo eval() (del jedra jezika JavaScript). Lastnost src izbranega predmeta je prirejena lastnosti src vidnega slikovnega predmeta na strani, prednaložena slika se pojavi takoj.

Gor e-gradiva JavaScript Dostop do slik Predmet image

SERŠ Maribor : Strokovna gimnazija : 2004 : Matej Vogrinčič

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri