Loading text při nahrávání iframu

Pokud používáte na svých stránkách iframe, který například zobrazuje vyhledávač letenek nebo jakékoliv jiné webové stránky tak ste již určitě zjistili, že nahrání tohoto iframu trvá několik sekund a po dobu nahrávání je stránka prázdná. Návštěvník tak může nabýt dojmu, že vaše stránka nic neobsahuje a odejít z ní ještě dřív než se iframe nahraje. Tento problém lze vyřešit přidáním textu např. "Nahrávám data, prosím čekejte", který bude zobrazen v průběhu nahrávání iframu a jakmile se iframe zobrazí, text se skryje. Toto lze řešit pomocí JavaScriptu volaným v iframu pomocí OnLoad a skrytím textu přes CSS...

OnLoad ale není povolená hodnota u iframu dle standardu W3C. Neprojde tedy validací. Řešením je například využití knihovny jQuery a její funkce Load().

Na stránku kde chceme zobrazit iframe vložíme div s textem a přiřadíme mu ID:

<div id="loading">Nahrávám data, prosím vyčkejte...<br /><img src="/loader.gif" width="220" height="19" alt="Loading" /></div>

Můžete také použít animovaný indikátor nahrávání Ajax, který si lze vygenerovat na stránce AjaxLoad.

Pod tento div vložíme iframe také s unikátním ID:

<iframe id="framex" frameborder="0" src="..." > </iframe>

A pod něj tento script:

<script type="text/javascript">
var $s = jQuery.noConflict();
 $s('#framex').load(function (){$s('#loading').fadeOut(500); });
 </script>

Framex a loading nahraďte správným ID který jste použili pro div a iframe. FadeOut(500) navíc způsobí pomalé mizení nahrávacího textu v rychlosti 500ms.

Všimněte si, že sem použil navíc funkci noConflict() a změnil proměnnou dolar na $s. Je to z důvodu využívání vice jquery funkcí a kombinaci s dalšími knihovnami. Této problematice sem se zabýval v minulém článku "Konflikt mezi jQuery a MooTools".

Do hlavičky stránky mezi <body> a </body> ještě nezapomeňte vložit script s jquery:

<script src="jquery.min.js" type="text/javascript"></script>

Tento způsob by měl bez problému projít validací na W3C.