Načítanie stránky trochu inak

Možno sa vám už niekedy stalo, že ste robili stránku, ktorá obsahovala obrázky, ktoré sa pri nejakej príležitosti menili (napr. menu), alebo stránku obsahujúcu väčšie množstvo obrázkov. No a v takom prípade bolo niekedy na škodu, že sa stránka vykresľovala postupne, alebo v prípade menu, ak sa obrázky menili a vtedy, ak bol nad nimi kurzor myši, tak sa tie obrázky chvíľu doťahovali.

Podobné veci postretli aj mňa, a preto ma napadlo, že môžem tomuto predísť tak, že stránku načítam „na pozadí“, zatiaľ, čo na monitore bude informácia o tom, že stránka sa načítava.

Rozhodol som sa, že použijem vymoženosti dnešnej doby, t.j. Document Object Model, JavaScript a kaskádové štýly (CSS). To znamená, že funkčnosť bude mierne obmedzená, resp. s novými prehliadačmi, Internet Explorer 5.0+ (pravdepodobne aj s IE 4.1 by ste nemali mať problém, ale netestoval som to), Netscape 6.x, Mozilla 0.9.x a Opera 5.x nebudete mať problém.

V príklade vám ukážem ako to funguje. Príklad načítava jeden väčší obrázok, ale nie postupne. Kým sa načítava obrázok, tak užívateľ vidí informáciu o načítavaní. V momente ako sa obrázok celý načíta, tak oznam zmizne a obrázok sa ukáže okamžite.

Príklady som urobil dva. Prvý príklad je pre tých, ktorí si pozerajú tieto stránky cez dial-up spojenie, resp. obrázok má 260kb. Druhý príklad je naopak pre tých ktorí používajú pevnú linku, prípadne iné rýchlejšie spojenie (obr. má cca 680kb).

Princíp fungovania je veľmi jednoduchý. Ide o to, že sa urobí (napíše) úplne klasicky celá stránka, resp. napíše sa celý (ľubovoľný) HTML kód. Jediným rozdielom je to, že tomuto kódu sa priradí atribút hidden (pomocou JavaScriptu a DOM-u), resp. tento kód sa skryje na čas potrebný pre jeho vykreslenie. A počas načítavania tohoto kódu bude na obrazovke informácia o načítavaní, alebo iná informácia.

Teda HTML kód v tagu body vyzerá takto:

Teda celý HTML kód je rozdelený na dve časti. Prvú časť

tvorí vycentrovaný odstavec, ktorý má priradené ID upozornenie. Jeho spracovanie je na vás, ja tom so riesil pomocou kaskádových štýlov (CSS) v triede upz. Tú popisovať nebudem, jej kód si môžete pozrieť v príklade.

V druhej časti

sa nachádza zvyšok stránky. V podstate je tu všetko to, čo má stránka podľa vás obsahovať. Jediný rozdiel je v tom, že som tejto časti priradil atribút hidden, aby sa táto časť kódu hneď nevykresľovala. Tak isto som jej priradil vlastné ID, konrétne uvod.

Čiže stránka sa nahráva, ale nie je vidieť vykresľovanie, lebo tá časť má atribút hidden. No a teraz už iba stačí zabezpečiť, aby keď sa stránka celá načíta, aby zmizol nápis o nahrávaní a zároveň sa objavil požadovaný obsah.

Dá sa to urobiť veľmi jednoducho. Použijem atribút onLoad v tagu body a zavolám ním funkciu Inicializacia():

Samotná funkcia Inicializacia()

iba zmení atribút hidden na visible druhej časti HTML kódu a naopak pri prvej časti.

Dúfam, že vám to bolo zrozumiteľné a prajem príjemný deň.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.