Neblikajte zbytočne, obrázky si predčítajte
Bežnou vecou pri tvorbe web stránok je používanie efektu, spočívajúceho v tom, že ak kurzorom prejdeme na určitý obrázok na stránke, nahradí ho iný obrázok. Týmto môžeme docieliť napríklad stlačenie tlačidla, podfarbenie ikonky, vyznačenie oblasti na mape a podobne. Celé to funguje pekne, až na jeden malý detail. Prehliadače totiž načítavajú len tie obrázky, ktoré sú použité v obsahu stránky. Obrázky, ktoré sa zobrazia až po prechode kurzorom, si prehliadač pri prvom vykonaní tejto akcie musí najprv stiahnuť a až potom ich zobrazí.
Pri tejto operácií, ktorá trvá menej ako sekundu, v mieste kde má byť zmenený obrázok nastane krátke bliknutie. Aby sme tento nežiaduci jav odstránili, je potrebné aby si obrázky prehliadač načítal skôr, ako ich bude potrebovať, ale zároveň nemajú byť na stránke viditeľné. Odstrániť tento neželaný efekt nie je nič zložité. Najjednoduchším spôsobom je, že si na stránke vytvoríme skryté miesto, do ktorého budeme vkladať obrázky. Tie sa nezobrazia, ale prehliadač si ich už načíta. Ako na to krok za krokom, uvedieme v nasledujúcom príklade.
Príklad: máme tlačidlo na webe:
<div class=“button“>Toto je tlacitko</div>
K tomuto tlačidlu máme zadefinované tieto štýly:
.button {
background-image: url(button.png);
background-repeat: no-repeat;
width: 100px;
height: 50px;}
.button:hover {
background-image: url(button-hover.png);}
Štandardne sa nám zobrazí tlačidlo s pozadím a textom, a pri prechode myškou sa jeho pozadie zmení. Avšak pri tejto zmene nám blikne jeho pozadie. Preto do tela webu vložíme skrytý element, v ktorom si načítame obrázok.
<div class=“hidden“>
<img src=”button-hover.png”>
</div>
Nesmieme mu zabudnúť nastaviť aj štýl. Pre istotu, aby nespôsoboval nejaké anomálie, ho odsunieme tiež mimo zobrazovanej plochy a veľkosť nastavíme na najmenšiu možnú. V každom prípade, postačuje len nastaviť atribút „display“ na hodnotu „none“.
.hidden {
position: absolute;
overflow: hidden;
display: none;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;}
Toto riešenie je najjednoduchšie a docielime ním, že už nebude nastávať blikanie obrázkov. Toto riešenie má ale i jednu nevýhodu. Nesmieme zabudnúť na to, že ak pridáme nejaký obrázok do štýlu, musíme ho pridať aj do skrytého elementu v tele webu. Rovnako ak nejaký obrázok prestaneme používať, musíme zabezpečiť korešpondenciu údajov v štýloch a v skrytom elemente.
Našťastie existuje dostupné riešenie. Tu potrebujeme niečo, čo za nás bude kontrolovať, aké obrázky sme použili v štýloch. Výborným nástrojom na to je skriptovací jazyk JavaScript, ktorý je už roky bežne dostupný vo všetkých webových prehliadačoch. A riešením je nasledujúca funkcia:
function imageAutoload() {
var a, b, img;
for (a = 0; a < document.styleSheets.length; a++) {
for (b = 0; b < document.styleSheets[a].cssRules.length; b++) {
backgroundImage = document.styleSheets[a].cssRules[b].style.backgroundImage;
if (backgroundImage.length <= 0) {
continue;}
backgroundImage = backgroundImage.substring(5,backgroundImage.length-2);
img = document.createElement(‚img‘);
img.src = backgroundImage;
img.style.display = ‚none‘;
document.getElementsByTagName(‚body‘)[0].appendChild(img);}}}
Túto funkciu môžeme umiestniť do samostatného súboru alebo ju vložiť do webu medzi tagy <script type=“text/javascript“> … </script>, ale zavolanie funkcie musí nastať až na konci dokumentu, teda pred ukončovacím tagom </body>. Princípom tejto funkcie je, že prechádza jednotlivé načítane štýly (teda to sú načítane .CSS súbory). V každom štýle prechádza jednotlivé definované pravidlá a ak je nastavený nejaký obrázok pre pozadie, tak v elemente web stránky <body> vytvorí skrytý element obrázku, a do neho nastaví požadovaný obrázok.
Výhoda tohto riešenia spočíva v tom, že len zabezpečíme aby sa načítala tato funkcia a o nič viacej sa už nemusíme starať. Všetky potrebné obrázky za nás načíta JavaScript, vyhneme sa blikaniu
a zároveň jednotlivé obrázky máme definované len raz v štýloch a nikde inde.
Na záver pripájam malú ukážku načítavania obrázkov.
