ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

Stránka se načítá, co s tím?

16. listopadu 2002
•
Robert Bisom

Související

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 při načítání stránky

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.

Předchozí článek Chrání e-shopy osobní údaje?
Další článek Geometrické útvary s využitím akcí ve Photoshopu
Štítky: Články
Robert Bisom

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 *