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.

<SCRIPT language="javascript">
<!–   var DHTML = (document.all || document.layers);     // podporuje prohlizec layers?
  function getObj(name) {     // fce: ktery ze to mame prohlizec?
    if (document.all) {     // Internet Explorer
      return document.all[name].style; }
    else if (document.layers) {     // Netscape Navigator
      return document.layers[name]; }
  }     // end function
  function Ukaz_prubeh(div,flag) {     // fce pro zobrazeni (skryti) DIV
    if (!DHTML) return;     // jen tehdy, kdyz to prohlizec umi
    var x = getObj(div);     // reference na objekt DIV
    x.visibility = (flag) ? ‚visible‘:’hidden‘;     // flag=1 (visible), flag=0 (hidden)
    if(document.layers) x.left=280/2; return true;     // umisteni DIV pro pro Netscape
  } // end function
  Ukaz_prubeh(‚Prubeh_div‘, 1);     // zavolame fci a DIV zobrazime
//–>
</SCRIPT>

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.

<SCRIPT language="javascript">
<!–
  Ukaz_prubeh(‚Prubeh_div‘, 0);
//–>
</SCRIPT>

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.

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

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

Předchozí článek Oživená průhlednost ve Flashi
Další článek Jednoduchý malíř pro WAP

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *