Zobrazení ‚průběhu‘ načítání webové stránky
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:
|
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.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Landing page: Jak vytvořit landing page s vysokým CTR
7. května 2024 -
Umělá inteligence v IT
27. září 2023 -
Webový správce souborů Filestash – dojmy a recenze
29. července 2024
Nejnovější
-
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024