Stránka se načítá, co s tím?
Možná jste se už při svých toulkách internetem setkali s dialogem, který vám připomenul tu smutnou skutečnost, že stránka se stále ještě načítá. Některé z těchto dialogů naštěstí programátoři obohatili o zajímavou informaci, kolik ze stránky už má prohlížeč v paměti. V tomto článku vám ukáži jeden z takových „chytrých“ dialogů v JavaScriptu.
Nejprve se podívejme na ukázku.
Dialog bude ukazovat skutečnou informaci o tom, kolik ze stránky je v paměti prohlížeče. K tomu s výhodou využijeme JavaScript. V objektu document.all.length je uložen počet elementů právě zobrazených na stránce. Hodnota tohoto objektu se samozřejmě mění podle toho, kdy se na počet zeptáme, tudíž bude počet elementů na stránce menší, pokud se stránka stále načítá, než když je stránka zcela načtena. A protože budeme mít ve skriptu uložen počet elementů, který by stránka měla obsahovat na konci načítání, můžeme během jejího načítání jednodušše vypočítat, jaká část je ze stránky načtena. Z toho také vyplývá, že se dialog nehodí do frekventovaných internetových diskusí a bazarů, ale spíše na firemní prezentace, domácí stránky, rozsáhlé výpisy apod.
Nejdříve připravíme klasické hlavičky stránky:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dialog při načítání stránky</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
Teď definujeme styly, kterými si dialog obarvíme a vložíme obrázek na pozadí:
<style>
.wait_dialog {
font-family: "Times New Roman", Times, serif;
font-size: 15px;
color: #BBFFBB;
width: 200px;
height: 100px;
text-align: center;
position: absolute;
left: 400px;
top: 300px;
background-image: url(img/wait.gif);
}
</style>
</head>
Poslední část na stránce bude vypsání dialogu a vložení JavaScriptu, který se postará o aktualizaci informace o míře načtení stránky.
<body onload="document.all.wait_table.style.visibility = ‚hidden‘; window.clearInterval(interval)">
<!– dialog –>
<div class="wait" id="wait_table" style="visibility: hidden">
<table cellspacing="0" cellpadding="0" class="wait_dialog">
<tr>
<td>Stránka se načítá…</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="width: 184px; height: 21px; border-style: solid; border-color: #BBFFBB" border="1">
<tr><td style="border: 0px"><span style="width: 1px; background-color: #BBFFBB; margin: 1px;" id="wait_field"></span></td></tr>
</table>
</td>
</tr>
<tr>
<td><b><span id="wait_count">0</span>%</b></td>
</tr>
</table>
</div>
<script language="JavaScript" type="text/javascript">
<!–
var count_elem = 26; // počet elementů, který bude stránka obsahovat na konci načítání
document.all.wait_table.style.visibility = ‚visible‘;
all = document.all;
interval = window.setInterval("writewait()", 100); // nastavím aktualizování procent zobrazených v dialogu
function writewait() { // funkce starající se o aktualizování dialogu
if (count_elem == 0) {
document.all.wait_table.style.visibility = "hidden";
}
else { // vykreslení procent do dialogu
document.all.wait_count.innerText = Math.round(all.length / (count_elem / 100));
document.all.wait_field.style.width = Math.round(all.length / (count_elem / 100)) * 1.8;
}
}
//–>
</script>
<!– Dále již bude následovat vlastní obsah stránky –>
</body>
</html>
Tento dialog by měl následovat před každou stránkou, do které ho chcete umístit. Jak vidíte, nejdříve definujeme proměnnou count_elem, ve které budeme mít počet elementů, který bude stránka obsahovat při ukončení načítání. Pokud se tedy obsah stránky změní, budete muset aktualizovat i tento počet elementů. Dále nastavíme interval, po kterém se bude zjišťovat, kolik elementů už je na stránce. Tento údaj ve funkci writewait() přepočítáme na procenta a dokreslíme do dialogu.
Jak ale zjistíte, kolik elementů bude stránka obsahovat, až bude načtena, abyste mohli doplnit proměnnou count_elem? Je to jednoduché, zajistíte, aby se na konci načítání stránky zobrazil pomocí JavaScriptovské metody alert objektu window. Takže tag body bude vypadat následovně:
<body onload="document.all.wait_table.style.visibility = ‚hidden‘; window.clearInterval(interval); alert(document.all.length)">
Celý skript si můžete stáhnout.
Nabízené řešení není samozřejmě jediné, další najdete v článcích Zobrazení ‚průběhu‘ načítání webové stránky a Načítanie stránky trochu inak.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
