Rychleji nahrávané stránky

Jiří Kosek ml.

Při prohlížení některých stránek se setkáváme s nepříjemným jevem, že se stránka definitivně vykreslí až po přenesení všech obsažených obrázků. Projevuje se to tak, že buď dlouho není ze stránky vidět téměř nic a pak se stránka rychle zobrazí i včetně obrázků nebo se stránka nějak zobrazí a po tom, co se načtou obrázky se celá překreslí s novým layoutem.

Tento jev je při brouzdání Webem velmi nepříjemný. Jak hned zjistíme, lze jej naštěstí na našich stránkách velmi snadno odstranit. Problémy se zobrazováním jsou způsobeny tím, že v době vykreslování textové části stránky nejsou známy velikosti obrázků, okolo kterých má text obtékat.

Element IMG obsahuje dva atributy WIDTH a HEIGHT, kterými lze explicitně určit velikost obrázku. Pokud tyto atributy ve svých HTML dokumentech použijeme, bude prohlížeči známa velikost obrázku již v době načtení textu stránky a bude pro něj moci vynechat potřebné místo. Samotný obrázek se pak na vynechaném místě doplní až po přenesení po síti. Mezitím však bude naše stránka k dispozici uživateli ve své konečné podobě.

Rozměry obrázku můžeme zjistit v nějakém grafickém editoru nebo přímo v prohlížeči. Pokud v Navigatoru najedeme kurzorem myši nad obrázek a stiskneme pravé tlačítko myši, objeví se menu. Z něj vybereme příkaz Open Image. V titulku okna se pak objeví rozměry obrázku. Dejme tomu, že na stránce máme zařazen obrázek logo.gif o rozměrech 120 x 170 pixelů. Pro zařazení do stránky můžeme použít zápis:

<IMG SRC="logo.gif" WIDTH=120 HEIGHT=170>

Neměli bychom však zapomenout na použití atributu ALT, který určuje text nahrazující obrázek ve znakových prohlížečích. V grafických prohlížečích se tento text zobrazí v obdélníku vymezeném pro obrázek, ještě než se nahraje samotný obrázek. Uživatel tak má k dispozici informaci o obsahu obrázku ještě dříve, než obrázek dorazí. Může to urychlit jeho práci, v případech kdy je obrázek odkazem, který se rozhodne uživatel navštívit:

<IMG SRC="logo.gif" WIDTH=120 HEIGHT=170
     ALT="Logo firmy Company">
Obr. 1: Stránka je definitivně vykreslena ještě před natahováním obrázků
© Jiří Kosek 1999