Flickering (podrhtavanje, treperenje) slike
Pojednostavljeno: kako radi preglednik (engl. browser) ?
Kad korisnik upiše URL adresu (ili izabere hyperlink, odnosno bookmark), Web preglednik šalje zahtjev serveru u kojem traži isporuku stranice (objekta koji se nalazi na danom URL-u). Ako se radi o (X)HTML stranici, preglednik analizira sadržaj kako bi ga mogao prikazati korisniku. Ako na stranici ima slika (ili drugih objekata, poput Flash-a ili zvuka), za svaku takvu sliku šalje se novi zahtjev serveru. Preglednik može prikazati sadržaj bez dodanih objekata i onda ih postavljati na stranicu kako mu vremenski stignu (od servera).
Korisnici često traže iste stranice (objekte). Veliko ubrzanje dobiva se ako preglednik može spremiti sadržaj stranice lokalno (u cache memoriju, obično na disk), pa kad korisnik ponovo zatraži stranicu, pročitati sadržaj s lokalnog diska (umjesto ponovnog zahtjeva serveru).
Pod kojim uvjetima preglednik može sačuvati podatke u cache-u ? Administrator server-a može odrediti koje vrste objekata se mogu cache-irati (i koliko vremena). Na nekim serverima to može napraviti svaki autor stranice za svoje objekte (npr. na PHP stranicama naredbom header()). Dodatno, korisnik može (kod nekih preglednika) donekle modificirati ponašanje cache-a.
Kad ima cache, preglednik prvo provjeri postoji li objekt i da li je još OK (nije isteklo vrijeme koje objekt može biti u cache-u). Ako je sve u redu, korisniku se isporučuje objekt s lokalnog diska.
Rukovanje cache-om IE6 baziranih preglednika
Korisnik može podesiti IE6 (na meniju Tools, Internet Options Settings) tako da provjerava postoji li nova verzija stranice (objekta) kod svakog posjeta (Every visit to the page). To se ne odnosi samo na stranice, već i na sve objekte na stranici. Pa kad korisnik prelazi mišem preko pozadinske (background) slike koja se mijenja :hover efektom, preglednik šalje upit serveru kojim ga traži novu verziju slike. Server treba odgovoriti HTTP/1.x 304 Not Modified, što omogućava pregledniku korištenje već postojeće slike. Ta (vremenski kratka) komunikacija uzrok je treperenju slike.
CSS background (pozadinske) slike
Upotreba
Na ovim stranicama, link (veza) prema naslovnoj stranici skrivena je "ispod" logo slike (ovisno o izabranom stilu, to je moja slika ili stilizirani potpis). Prelaskom miša preko slike aktivira se hover efekt (doslovni hrvatski prijevod riječi hover je "lebdjeti iznad"). Hover efekt svodi se na prikaz druge (zamjenske) slike dok je miš iznad slike.
U XHTML-u je na svakoj stranici ovakva sekvenca:
<div id="ja"> <a href="../index.html" title="Naslovna stranica (access key 1)" accesskey="1"> <span class="alt">Naslovna stranica</span></a> </div>
Preglednici koji ne razumiju CSS prikazat će vezu (link) na naslovnu stranicu. Atribut accesskey <a> elementa omogućava aktiviranje veze pritiskom na Alt-1 kombinaciju (pod Windows-ima). Za preglednike koji razumiju CSS, pravila prikaza nalaze se u vanjskim datotekama. Tako stil "default" definira:
#site #ja a, #site #ja a:visited {
background: url(../i/d31.jpg) no-repeat;
display: block; height: 72px;
}
#site #ja a:hover, #site #ja a:active {
background: url(../i/d32.jpg) no-repeat;
}
Na stranicama koje opisuju izradu ovog site-a (pa imaju <body id="site">), preglednik prikazuje sliku navedenu u background svojstvu (property-ju). U gornjem primjeru, normalno se prikazuje slike d31.jpg, a kod hover efekta zamjenjuje ju d32.jpg.
Kod ovako navedenih CSS pravila, IE6 generira zahtjev za slikom d32.jpg kad miš dođe iznad slike, a kod napuštanja teritorija slike, generira se zahtjev za slikom d31.jpg.
Cijela konstrukcija zatvorena je u <div> element-u unikatno označenim atributom id="ja". To omogućava postavljanje cijele konstrukcije (<div> element-a) na različite pozicije na stranici (na stilu "logo", konstrukcija se nalazi s lijeve strane, a kod ispisa na papir uopće se ne prikazuje). A to omogućava, dodatno, slijedeće razmišljanje: mogu postaviti hover sliku (d32.jpg) kao pozadinu <div> element-a, "normalna" slika (d32.jpg) ostaje kao pozadina <a> element-a, a na :hover mogu reći da se pozadina <a> element-a (slika d32.jpg) sakrije !!! Efektivno, ostaje prikazana slika s <div> element-a. CSS kod za to je:
#site #ja {
background: url(../i/d32.jpg) no-repeat;
}
#site #ja a, #site #ja a:visited {
background: url(../i/d31.jpg) no-repeat;
display: block; height: 72px;
}
#site #ja a:hover, #site #ja a:active {
background-image: none;
}
Što sam time dobio ? Efekt je isti, ali je treperenje slike smanjeno. Naime, IE6 sada generira samo zahtjev za slikom d31.jpg kod napuštanja teritorija slike, dok se zahtjev za d32.jpg više uopće ne generira. Bolje navedena pravila uzrokuju samo jedan zahtjev server-u i praktično eliminiraju treperenje slike.
Administracija servera
Ako IE6 preglednik dobije egzaktnu instrukciju od servera kojom mu se kaže kako može čuvati objekt u cache memoriji, on će učitavati objekt iz cache-a (dok je objekt valjan) bez obzira na to kako je korisnik definirao opcije. Web server treba poslati instrukcije o valjanosti objekta svaki put kad šalje i sam objekt.
Apache web server
Apache server ima modul mod_expires kojim možemo kontrolirati Expires instrukciju (HTTP header). Na Apache 2.x serveru potrebno je aktivirati (učitati) modul i definirati njegovo ponašanje. Administrator može u konfiguracijskoj datoteci navesti:
LoadModule expires_module modules/mod_expires.so ExpiresActive On ExpiresByType image/gif A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/png A2592000
LoadModule direktiva učitava modul, a ExpiresActive On aktivira slanje Expires instrukcija. ExpiresByType direktive definiraju (za slike u gif, jpeg i png formatu) kako su objekti u cache-u valjani 30 dana (30 dana x 24 sata x 3600 sekundi = 2592000) od zadnjeg pristupa.
Alternativni (ljudima čitljiviji) format direktive dozvoljava nam upis oblika:
ExpiresByType image/gif "access plus 1 month" ExpiresByType image/gif "access plus 4 weeks" ExpiresByType image/gif "access plus 30 days" ExpiresByType image/gif "access plus 720 hours" ExpiresByType image/gif "access plus 43200 minutes" ExpiresByType image/gif "access plus 2592000 seconds"
što sve ima potpuno isti efekt. Za (X)HTML dokumente puno je bolje specificirati valjanost stranice od vremena zadnje izmjene (npr. za slijedećih 7 dana):
ExpiresByType text/html "modification plus 7 days"
Kontrola Expires instrukcije može se postavljati različito, ovisno o direktoriju na disku ili po pojedinom virtualnom serveru. Ukoliko nije potrebno slati Expires instrukcije iz direktorija /home/users može se navesti:
<Directory "/home/users"> ExpiresActive Off </Directory>