Ukazatel průběhu načtení stránky v JavaScriptu

30. března 2001

•

Trpělivost návštěvníků našich WWW stránek není obvykle nekonečná. Při otevírání delších stránek, zejména, jsou-li zarámovány v tabulce, se nám může hodit následující jednoduchý skript, který na počátku stahování stránky zobrazí jednoduché „popup“ okno s animovaným ukazatelem průběhu, a po natažení stránky jej automaticky zavře.

Funkčnost skriptu byste měli vidět při natahování této stránky (pokud vám „popup“ okénko uniklo, zkuste reload). Přibližně ve středu obrazovky se zobrazilo malé okénko s nápisem „Probíhá načítání okna“, v němž byl během načítání animován červený ukazatel, po ukončení načítání stránky se okno automaticky zavřelo.

Skript, který uvedené chování zajišťuje, je téměř celý uveden v hlavičce stránky. Nejprve zadefinujeme dvě pomocné proměnné. První z nich, timeout, je konstanta udávající náš odhad, jak dlouho (v sekundách) se bude stránka načítat (tato hodnota samozřejmě nebude nikdy přesná, slouží k přípravě ukazatele průběhu a její konkrétní hodnotu pro tu kterou stránku je nejlepší vyzkoušet). Druhá proměnná, elapsed, udává počet vteřin, které již uběhly od počátku načítání stránky.

var timeout = 12
var elapsed = 0

Následuje samotné otevření popup okna. Okno můžeme otevřít buď s odkazem na konkrétní URL, udávající jeho obsah, nebo můžeme obsah okna zapsat pomocí JavaScriptových funkcí, tak jak je tomu zde. V našem případě jsme pro vytvoření ukazatele průběhu použili jednořádkovou tabulku, kdy každá buňka tabulky obsahuje nejprve obrázek nevyplněného políčka ukazatele (soubor "blank.gif").

var meWnd = window.open( "", "alerter", "width=300,height=200,top=200,left=200" );
meWnd.document.write( "<html>\n<head>\n<title>Probíhá načítání...</title>\n</head>\n")
meWnd.document.write( "<body>\n<p align='center'>\nProbíhá načítání okna...</p>\n")
meWnd.document.write( "<p align='center'><table width='90%' align='center'><tr>\n")
for( var i=0; i<timeout; i++ ) {
meWnd.document.write( "<td width='" + 100/timeout + "%'><img src='blank.gif'></td>\n")
}
meWnd.document.write( "</tr></table></p></body></html>")

Následuje definice dvou animačních funkcí. První z nich, nazvaná UpdateAlerter(), zabezpečuje postupnou záměnu políček ukazatele v popup okně z prázdných na vyplněná (nastavuje vlastnost src prvku image):

function UpdateAlerter() {
    if (typeof(meWnd.document) == "object") {
        if( elapsed<timeout )
            meWnd.document.images[elapsed].src="full.gif"
        elapsed++
    }
}

Druhá z funkcí, CloseAlerter, má za úkol zavřít popup okno:

function CloseAlerter() {
    if (typeof(meWnd.document) == "object") {
        meWnd.close()
    }
}

Poznámka: Podmínka, do níž jsou zarámovány obě funkce, ošetřuje skript proti chybě, pokud je popup okno zásahem uživatele nebo vlastním skriptem zavřeno.

Nyní musíme zabezpečit správné volání obou funkcí. Animační funkci UpdateAlerter budeme volat pomocí časovače opakovaně každou vteřinu. Pro funkci CloseAlerter nastavíme jedno volání po uplynutí intervalu timeout - toto nastavení zabezpečí, že pokud z nějakého důvodu zhavaruje načtení celé stránky, nezůstane popup okno "viset" nad hlavním oknem prohlížeče:

setInterval("UpdateAlerter()",1000)
setTimeout("CloseAlerter()",1000*timeout)

Nakonec musíme zajistit zavření okna (tedy volání funkce CloseAlerter) po natažení celé stránky - tedy normální chování skriptu - výše uvedené volání pomocí setTimeout slouží pouze k nouzovému uzavření popup okna. Zabezpečíme to následujícím řádkem skriptu, který umístíme buď na konci stránky (např. někam před závěrečné </BODY>), nebo, což je lepší, do handleru události onLoad tagu BODY:

CloseAlerter()

To je k ukazateli průběhu načtení stránky pro tentokrát všechno. Jako obvykle, skript skýtá celou řadu možností vylepšení, jmenujme například centrování popup okna, nejrůznější vylepšení grafická, přizpůsobení rychlosti animace ukazatele uplynulému času (tak jako to dělá např. Internet Explorer, kdy se, pokud natažení stránky trvá příliš dlouho, běh ukazatele výrazně zpomalí), atd.

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