© 2013 All rights reserved.
2

Ajax loader

Často se na webu setkáváme s Ajaxem, a spolu s ním s nejrůznějšími leadery. Většinou se jedná o leadery ve formátu GIF, které nás upozorňují na fakt, že se na webu na pozadí něco načítá. Loader ale nemusí být pouze Gifový obrázek.

Loadery v podobě Gifových obrázku jsou velmi pěkné a vhodné zejména při preloadu obrázků. Konkrétně u obrázků je tento typ i vcelku praktický.

Problém nastává při načítání nejenom obrázku, ale například při načítání textového obsahu webu.
Docela se mi zalíbilo řešení, se kterým jsem se setkal na googlu, kdy při se při loadingu neobjeví žádný Gifový obrázek, ale oblasti, která bude refreshována, se změní styly a celá oblast jakoby zprůhlední.

Toto řešení je vcelku jednoduché, protože na danou část HTML stránky stačí nastavit vlastnost opacity.

Při nastavování a používání této vlastnosti pomocí javascriptu zřejmě narazíte na dva problémy.

Nastavení opacity

První problém je způsoben tím, že každý prohlížeč nastavuje tuto vlastnost jinak, a proto musí být ošetřeny různě. V jednotlivých typech prohlížečů se daná vlastnost jmenuje jinak, takže stačí pouze testovat, zda vlastnost s daným jménem existuje a pokud ano, jednoduše ji nastavit. V úvahu bereme, že proměnná el představuje objekt elementu na stránce a proměnná alpha representuje hodnotu nastavované vlastnoti:

  • Mozilla, Firefox
    V prohlížečích Mozilla a Firefox se vlastnost jmenuje MozOpacity. Hodnota MozOpacity je v rozmezí 0-1:

  • Internet Explorer
    V prohlížeči Internet Explorer je situace trochu rozdílná v tom, že nastavovaná hodnota je, na rozdíl od ostatních prohlížečů uváděna v rozmezí 1-100, koeficient tedy násobíme stem.
    Navíc musíme nastavit hodnotu pro Filter:

  • Opera:
    V prohlížeči Opera je vlastnost pojmenována opacity, a její hodnoty jsou, stejně jako například ve Firefoxu, v rozmezí 0-1:

Celá funkce může vypadat například takto:

Vstupní parametry jsou název elementu na stránce, a hodnota pro Opacity, udaná v rozmezí 0-1.

Nastavení stylů

Druhý problém, se kterým se zřejmě setkáte jsou styly textu při nastavení opacity. Tento problém se objevuje pouze v prohlížeči Internet Explorer, jak ve verzi 6, tak ve verzi 7. Při nastavení opacity na určitou hodnotu větší než 100 a opětovnému vrácení opacity na původní hodnotu 100 se změní styl textu. U obrázků se problém samozřejmě neprojevuje.

Problém je možné řešit nastavením správných stylů pro ovlivňovaný element, například:

Závěrem

Pro správnou funkci je důležité zejména vlastnost Float a font-size.
Funkčnost si můžete vyzkoušet na mnou vytvořeném příkladu například zde:
http://zaachi.com/…/ajax_loader/

Po kliknutí na tlačítko Load proběhne refresh divu ve stránce.

Comments (2)

Zvlastni, nevim jak ostatnim, ale me to v Opere9.62 nefunguje, klikni na link a nic.
Jinak v IE8, FF3, Chrome0.4, Safari 3.2.1 je to OK.
Tak nevim, ale tu Operu mam rozhodne v "zakladnim" nastaveni :)

Jej. chybka. Snad je to uz funkcni ve vsech verzich opery.

Add comment

About
Hi, i am programmer from the Czech Republic. I love web development (Ruby, Ruby on Rails, PHP, Nette) and iOS development (Objective-C, Cocoa).
To cooperate, here is my phone:
+420 608 836