Ukazatel průběhu načtení stránky podruhé

V předchozím článku na toto téma jsme si ukázali, jak pomocí JavaScriptu „zpříjemnit“ návštěvníkům čekání na natažení WWW stránky. Na základě ohlasů čtenářů v diskusi se k tomuto tématu vracíme podruhé a ukážeme si některé další možnosti.

Pokud jste předchozí článek minuli, doporučujeme vám ho přečíst.

Jak dnešní skript funguje, uvidíte po klepnutí zde. V nově otevřeném okénku by se měl (pokud nejste vybaveni příliš rychlou linkou) na krátkou chvíli otevřít škaredý zelený obdélník s nápisem „Probíhá načítání stránky..“, který je po několika okamžicích vystřídán obrázkem. Tento příklad použití je ideální pro případy, kdy pomocí JavaScriptu otevíráte – např. ze stránky s náhledy – samostatná okénka s objemově velkými obrázky, popřípadě jinými informacemi náročnými na velikost.

Jak to celé funguje? Prvním předpokladem je rozdělení stránky na dvě samostatné oblasti (velmi netechnicky řečeno), z nichž jedna je na počátku natahování stránky viditelná a druhá nikoliv. Po dokončení natahování stránky (událost onLoad v tagu BODY) se pomocí krátkého JavaScriptu přepne zobrazení obou oblastí tak, že první je skryta, druhá zobrazena. Pochopitelně že první oblast obsahuje text s výzvou k trpělivosti, druhá poté samotný obsah stránky – v našem případě obrázek šermířů.

Prvním problémem, který musíme vyřešit, je ujasnit si, jakým způsobem budeme definovat v HTML ony výše zmíněné oblasti. V Internet Exploereru se přímo nabízí použití tabulek, které pomocí vlastnosti id pojmenujeme (např. tabulka1, tabulka2), přičemž samotné přepnutí viditelnosti provedeme nastavením inline stylu. Toto řešení však nefunguje v Netscape – přesněji řečeno, JavaScriptem se pod Nescape nedokážeme dostat na vlastnosti stylu obou tabulek.

V uvedeném příkladu jsme proto použili jinou variantu – obě oblasti definujeme pomocí tagu SPAN – sice i tak musíme pro Internet Explorer i Netscape použít odlišné verze obslužného kódu, řešení však jeví snahu fungovat na obou platformách. Zde je tedy HTML kód, použitý v ukázce:

Poznámka k funkčnosti: Uvedený kód byl testován v Internet Exploreru 5.0 a Netscape 4.73, už teď je ale jasné, že nebude fungovat na Netscape verze 6.0 – tento browser z nejasných důvodů nepodporuje vlastnosti objektu document použité dále, tedy ani vlastnost document.layers použitou pro Netscape, ani vlastnost document.all pro bratříčka IE. Dále, pokud budete oblasti SPAN vyplňovat vlastním HTML kódem, dejte si zejména u Netscape pozor na korektní syntaxi kódu mezi počátečním a koncovým tagem SPAN – i taková „trivialita“ jako neuzavření tagu <p> může okamžitě způsobit nefunkčnost této techniky. Do třetice pak, přiznám se že z mně neznámých důvodů, příklad pod Netsape přestává fungovat, pokud v počátečním tagu SPAN explicitně neuvedete vlastnost inline stylu position.

Tolik k funkčnostem, nebo spíše k nefunkčnostem, pod jednotlivými browsery, a nyní zpět k samotnému příkladu. Zbývá už jen málo. Nejprve doplníme do tagu BODY volání funkce, která provede záměnu viditelnosti obou oblastí…

…a nakonec tuto funkci, pojmenovanou zde FinishLoading, napíšeme (vhodné umístění je ve skriptu v hlavičce stránky):

První polovina této funkce pracuje pod Internet Explorerem, druhá polovina pod Netscape. Při odkazech na obě oblasti definované tagy SPAN využíváme jejich pojmenování span0 a span1 (viz vlastnost id v HTML kódu výše)- možná by bylo vhodnější pojmenovat tyto oblasti jmény s větší vypovídací schopností, to však už nechám na vás.

Uvedený skript lze doplnit také animací, která byla podrobně popsána v předchozím článku, zde ji tedy znova uvádět nebudeme. Rovněž lze příklad doplnit o další „vychytávky“ – např. po natažení obrázku přizpůsobit velikost okna jeho rozměrům apod.

Na úplný závěr opět jeden námět pro diskusi: zná někdo z vás, kteří pracujte s touto technikou, způsob, jak se „dostat“ na vlastnosti tagu SPAN i pod výše zmíněným prohlížečem Netscape verze 6.0 ?

Přeji vám příjemný den.

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

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