LOKACIJA: http://www.borislavdopudja.net/hr/tekstovi/css_preload/// Početna stranica / Tekstovi / > CSS preload slika

CSS preload slika, vodič - 2006.

Članak je spreman za ispis.

CSS preload slika je tehnika kojom slike možete preloadati koristeći samo XHTML i CSS. Rezultati koje na takav način možete postići su superiorni onome što se može učiniti sa JavaScriptom. Ovaj preload "trik" je univerzalan, radi čak i na starijim Internet preglednicima, uključujući one koji imaju JavaScript onemogućen ili nedostupan. Koristeći CSS preload birate koje će slike biti učitane prve na stranici. Još jedna zgodna stvar sa ovim malim trikom je to da će nivo pristupačnosti (accessibility) vaših stranica ostati isti.

Šašava kamila
Šašava kamila Smajli Photo by Phillip Collier.

Zašto koristiti preload?

Preload često nije posebno bitan, no ponekad postoje slučajevi kada se neke slike moraju učitati prije ostalih. Ako se to ne dogodi, vaše stranice u tim specifičnim slučajevima neće raditi ispravno. Važni elementi stranica bi se mogli učitati suviše sporo, što bi moglo biti problem korisnicima koji imaju sporu Internet vezu. Ne zaboravite da i danas većina korisnika pristupa Internetu pomoću modema!

Specifičan problem

Za primjer zamislite da imate Internet stranicu na kojoj se nalazi nekoliko slika kamile i menu.

U meniju postoje četiri osnovne kategorije koje su izvedene korištenjem velikih <a> tagova u kojima se nalazi boldani bijeli tekst. Lijepa pozadinska slika koja služi kao kontrast bijelom tekstu je definirana u CSS dokumentu. Na stranicama se nalazi i nekoliko većih slika kamile, pozvanih <img /> tagovima unutar XHTML dokumenta.

Elementi stranica se učitavaju slijedećim redoslijedom:

  1. XHTML
  2. CSS
  3. sve slike na stranicama
  4. pozadinske slike definirane CSS-om

Problem sa CSS pozadinskim slikama je taj što one imaju manji prioritet učitavanja. Kada korisnik koji je na Internet spojen modemom pristupi stranici, neće moći vidjeti bijeli menu tekst iz <a> tagova zbog toga što se sve pozadinske slike koje služe kao kontrastna pozadina neće učitati prije drugih slika na stranicama. Ovo predstavlja problem zbog toga što korisnik nikako ne može znati da se tu nalazi "još" menu-a i da bi trebao pričekati da se preostale pozadinske slike učitaju (bijeli tekst se ne vidi radi standardnog CSS pravila koje definira bijelu pozadinu ako se CSS pozadinska slika još nije učitala ili nije dostupna). Može se dogoditi da korisnik uopće ne bude zainteresiran sadržajem stranice, s time da ne može otići na druge dijelove vašeg web sajta radi toga što ne vidi kompletan menu. Sve slike sa stranica se nisu učitale, što znači da se niti sve CSS pozadinske slike nisu mogle učitati.

Par kamila
Par kamila. Photo by Mira Pavlaković.

CSS preload slika

Slike koje se pozivaju preko XHTMLa kodom <img src="image.gif" alt="Image description" /> imaju najviši prioritet. Nakon što se sve XHTML slike učitaju, kreće učitavanje CSS pozadinskih slika (ili se može dogoditi da se učita jedna ili dvije, dok druge moraju "pričekati" dok se sve druge ne loadaju). Pored toga, slike pozicionirane više u XHTML dokumentu se učitavaju prije onih ispod. Rješenje problema je jednostavno - postaviti slike za preload što je moguće bliže vrhu stranica i sakriti ih:

body
{
background:white;
}

#preload img
{
height: 0; width: 0; border-width: 0;
position: absolute;
bottom: 0;
left: 0;
z-index: -30;
}

Imajte na umu da ne možete koristiti display: none tag, tadi toga što neki stariji Internet preglednici neće učitati slike ako imaju taj property.

Morate koristiti position: absolute tag, i pozicionirati slike na donji lijevi kraj stranica sa z-index-om nižim od drugih elemenata na stranicama. Razlog ovomu je jednostavan; stariji preglednici će na mjestu gdje su slike definirane prikazati četiri male točkice. Koristeći ovu jednostavnu i praktičnu metodu, sakrit ćete ih ispod bijelo obojane pozadine. Pozicija dolje lijevo je odlično mjesto za skrivanje nečega, zbog toga što korisnici rijetko gledaju u taj dio pojedine Internet stranice. Smajli

Vjeovatno bi ste mogli izostaviti "height: 0; width: 0; border-width: 0;" liniju, radi toga što su slike pozicionirane ispod pozadine, no mislim da je prethodna metoda sigurnija.

U XHTML kodu, slike treba pozicionirati što je moguće bliže vrhu stranice.

<h1>Site title</h1>

<div id="preload">
<img src="img/bg_1.jpg" alt="Kamila BG1, PRELOAD" />
<img src="img/bg_2.jpg" alt="Kamila BG2, PRELOAD" />
<img src="img/bg_3.jpg" alt="Kamila BG3, PRELOAD" />
<img src="img/bg_4.jpg" alt="Kamila BG4, PRELOAD" />
</div>

Slike koje želite preloadati su postavljene poslije <h1>Site title</h1> heading taga. Ako učitate vaše slike bez CSSa, stranice će još uvijek izgledati prihvatljivo, a naslov članka ili stranica će ostati na vrhu stranice. Nadalje, slike su komentirane (alt="" opis), tako da netko tko će vašu stranicu gledati "golu" (bez CSSa) će shvatiti o čemu se radi i to ga neće smetati. Smajli Još jedna zgodna stvar je to što će korisnici koji koriste samo tekstualni prikaz stranica dobiti ideju kako bi one mogle izgledati u svojoj punoj ljepoti. Naravno, ako želite možete pomoću longdesc="" tagova podrobno opisati vaše slike.

Ako želite da se vaše preloadane slike ne prikažu tijekom ispisa, koristite:

<style type="text/css" media="print">
#preload
{
display: none
}
</style>

Alternative

Naravno da uvijek možete upotrijebiti JavaScript za preloadanje slika, no po mome mišljenju ova metoda je mnogo jednostavnija. Ovaj način preloadanja sam isprobao na slijedećim preglednicima (23.07.2006.):

JavaScript preload (vodiči):

Vodiči

Ako niste razumjeli neki od izraza upotrijebljenih u ovom vodiču, možda bi vas mogle zanimati slijedeće stranice:

Cestovni znak upozornenja na kamilu, kengura i pasanca
Pažnja! Kamila! Smajli Photo by Lauren Gabelhouse.

HTML i CSS:

Pristupačnost (Accessibility):

Nadam se da vam se dopao ovaj mali CSS preload vodič! Ako imate kakve komentare ili kritike, kontaktirajte me!

Povratak na vrh stranice.

Kompletna lista tekstova Vrh stranice

Kronološki poredana lista članaka, vodiča, priča, pjesama...


© Borislav Dopudja 1997. - 2007. i autori | Pravne napomene | AA+ | XHTML | CSS