Zobrazení ‚průběhu‘ načítání webové stránky

25. prosince 2001

•

Běžný uživatel vydrží čekat na zobrazení stránky asi 8 sekund. Jestliže se do té doby stránka alespoň částečně nenačte, odchází jinam. Přijít tímto způsobem o návštěvníka je určitě ten nejsmutnější případ – ani jste mu nestačili cokoli nabídnout a je pryč. Zkuste mu ale „zkrátit“ čekání zobrazením „průběhu“ načítání pomocí layers.

I když by při tvorbě stránky měla být na prvním místě koncepce a důkladné promyšlení struktury, přesto se někdy nevyhnete objemnému souboru. Jeho načtení pak trvá déle, než by se mohlo návštěvníkovi líbit. Pokuste se mu sdělit, že se na něj nezapomnělo a stránka se opravdu načítá. Toto sdělení můžete zobrazit různými způsoby: například otevřením (a následným zavřením) nového okna, pomocí funkce alert (opravdu nešťastné řešení) nebo obrázkem na pozadí stránek, který bude následně překryt.

Existuje ale ještě jedno, poměrně elegantní řešení – využití layers (vrstev) a jejich vlastnosti visibility (viz ukázka).

Co se skrývá pod pokličkou?

Zobrazované hlášení je kontejner DIV, který může obsahovat tagy HTML, tedy libovolný text i obrázky. Například takto:

<DIV id="Prubeh_div" style="LEFT: 29%; POSITION: absolute; TOP: 60%; VISIBILITY: hidden">
<CENTER>
<TABLE bgcolor="#CCCCCC" border="1" cellpadding="10" cellspacing="1">
<TR>
<TD align="middle">
<H1>Průběh načítání stránky</H1>
<IMG SRC="prubeh.gif" align="middle" border="0"> <BR> &lt!– obrazek nacitani –>
Libovolný text při načítání <BR>
</TD></TR></TABLE>
</CENTER>
</DIV>

Jak je z ukázky kódu patrné, elementu DIV jsem přiřadil identifikátor ID="Prubeh_div". Tímto identifikátorem se budu na celý blok následně odvolávat. Další atributy vlastnosti style říkají, jak se výsledek zobrazí: horní levý okraj začíná v 60 % výšky od vrcholu stránky a v 29 % šířky od levého okraje stránky. Objekt je neviditelný (VISIBILITY: hidden). Celá tato definice je umístěna na počátku stránky, aby se načetla hned po hlavičce. Protože je její viditelnost nastavena na HIDDEN, musíte ji změnit na VISIBLE. Pro zpřehlednění kódu a zjednodušení práce s viditelností hladin budu používat funkci Ukaz_prubeh.

Skript, který váš DIV zobrazí, musí následovat až po definici DIV. Jinak by se mohlo stát, že budete volat něco, co ještě neexistuje.

Popis skriptu je stejně jednoduchý, jako skript sám:

`var DHTML = (document.all \|\| document.layers);`	Nejprve si zjistěte, zda prohlížeč podporuje standard DHTML
`function getObj(name)`	Funkce vrátí handler (referenci) na objekt specifikovaný parametrem `name`
`function Ukaz_prubeh(div,flag)`	Univerzální funkce pro zobrazení nebo skrytí elementu specifikovaného parametrem `div`. Vlastnost VISIBILITY je změněna na základě `flag`. Tato proměnná je dvoustavová: 1 … element bude zobrazen 0 … element bude skrytý

Vlastní zavolání funkce Ukaz_prubeh('Prubeh_div', 1); (následující po definici skriptu) zobrazí dříve definovaný objekt DIV.

Za tímto skriptem a voláním funkce Ukaz_prubeh('Prubeh_div', 1); následuje vlastní obsah stránky. Element DIV je stále zobrazen a je umístěn nad textem stránky (pokud neexistuje hladina s vyšším indexem Z). Skrytí elementu proveďte až po načtení celé stránky – umístěte volání Ukaz_prubeh('Prubeh_div',0); na poslední řádky dané stránky.

Volání je identické, jen jsem změnil parametr flag na 0 (skrytí). Poznámka: další možností je nastavit DIV viditelný hned zpočátku a v tomto okamžiku jej pouze skrýt.

Tak a to je celé kouzlo. Tím, že je element DIV modifikovatelný stejně jako veškerý HTML kód, naskýtá se vám široké pole působnosti, jednoduše využijete CSS a další a další možnosti.

Snad ještě poznámka na úplný konec. V ukázce jsem použil gif, který animovaně zobrazuje procentní lištu. Obrázek nijak nemění svou rychlost, což nevadí, protože většina stránek se natáhne dříve, než dojede na konec lišty. Přesto je pro případ delších časů vytvořen tak, aby i plnění „inverzní“ barvou vypadalo jako načítání. Tím jsou vysvětleny uvozovky v nadpisu článku.