Javascript preloader

Fórum › JavaScript, AJAX, jQuery

takinoo 0

Newbie

24. 3. 2007 #1

Neviete niekto ako spraviť preloader na html stránku pomocou Javascriptu?Niečo grafické.Nech sa najprv zobrazuje preloader a stránka sa celá natiahne a až potom sa spustí.
Diky.

Nahlásit jako SPAM

IP: ...–

olgo0

Věrný člen

25. 3. 2007 #2

To takinoo: nikdy som to nerobil ale dalo by sa to nastavenim css vlastnosty tagu body. display: none definovat jeden blok s display: block a donho vlozit preloader (gif alebo co chces) a pri udalosti onLoad (ked bude nacitana cela stranka) zmenis preloaderbloku vlastnost display: none a body das display: block.
btw: samozrejme uzivatel bez js bude na stranku cakat do sudneho dna.

Nahlásit jako SPAM

IP: ...–

"Boze, dopraj mi, prosim ta, petdesiat rokov prace a zabavy, a potom nahlu smrt v spanku." J. Grisham

Ondřej Šplíchal 0

Posthunter

26. 3. 2007 #3

to by se dalo vyresit tim, ze to display: none se nastavi take javascritpem, cili se to bud vypne a pak zapne, nebo se to ani nevypne a ani nezapne :-)

Nahlásit jako SPAM

IP: ...–

takinoo 0

Newbie

26. 3. 2007 #4

To Zelenáč:Mohli by ste mi poradiť konkrétnejšie?Je mi jasné že užívateľ musí mať zapnutý JS.

Nahlásit jako SPAM

IP: ...–

Ondřej Šplíchal 0

Posthunter

26. 3. 2007 #5



<html>

  <head>

    <title>preloader v0.1</title>



    <script type="text/javascript">

      function ukaz(){

        document.getElementById("body").style.display = "block";

        document.getElementById("load").style.display = "none";

      }



      function skryj(){

        document.getElementById("body").style.display = "none";

        document.getElementById("load").style.display = "block";

      }

    </script>



  </head>

  <body onload="ukaz();">

    <div id="body">

      Ahoj. Tohle je suprova stranka, ktera funguje i bez javascriptu. Pro vetsi komfort si ho vsak doporucuji zapnout.

    </div>

    <div id="load" style="display: none;">

      Nacitam...

    </div>



    <script type="text/javascript">

      skryj();

    </script>



  </body>

</html>

Tohle by melo fungovat..

Nahlásit jako SPAM

IP: ...–

olgo0

Věrný člen

26. 3. 2007 #6

to by se dalo vyresit tim, ze to display: none se nastavi take javascritpem, cili se to bud vypne a pak zapne, nebo se to ani nevypne a ani nezapne :-)

ty vlole to by ma nenapadlo :D respect

Nahlásit jako SPAM

IP: ...–

"Boze, dopraj mi, prosim ta, petdesiat rokov prace a zabavy, a potom nahlu smrt v spanku." J. Grisham

Petr Fojtík0

Věrný člen

13. 4. 2007 #7

TO >> ZELENÁČ:Tohle by melo fungovat.. <<

A ono to nefunguje ani se zapnutým JS ani s vypnutým JS.
Jednak je třeba prohodit mezi sebou názvy funkcí (aby skryj() skrývala a ukaz() ukazovala správný DIV [id="load"].
Ale hlavně je nutné umístit volání skryj() sice za otevírací tag DIV , ale před načítaný obsah dokumentu.
[podtrzene]Opravená verze:[/podtrzene]

<html>

<head>

<title>preloader v0.1+</title>

<script>

function skryj(){

document.getElementById("body").style.display = "block";

document.getElementById("load").style.display = "none";

}

function ukaz(){

document.getElementById("body").style.display = "none";

document.getElementById("load").style.display = "block";

}

</script>

</head> <body onload="ukaz()">

 

<div id="body" style="display:none">

Ahoj. Tohle je suprova stranka, ktera funguje i bez javascriptu. Pro vetsi komfort si ho vsak doporucuji zapnout.

<h1>Zahajeno nahravani.....</h1>

</div>

 

<div id="load">

 

<script> skryj(); </script> <!-- jediné správné umístění příkazu SKRYJ() -->

 

 <div id="ifr">  <!-- simulace nahrávání - dobu určuje počet IFRAME tagů =3 -->

 <iframe src="." height="60%"></iframe>

 <iframe src="." height="60%"></iframe>

 <iframe src="." height="60%"></iframe>

 <script type="text/javascript">

  var i=5 , fpole = document.getElementsByTagName("iframe");

   for(el in fpole){ fpole[el].src="http://www.js-examples.com/forums/viewforum.php?f="+i++ }

 </script>

 </div>

 

</div>

 

</body></html>

[podtrzene]Více se mi líbí tato verze:[/podtrzene]
-používá třídy CSS (takže se vyhneme zásahům do DIVu s obsahem stránky)
-díky nekompatibilitě objektů styleSheets[].xxxRules[] v Mozilla/IE je univerzálnější použít
zápis "<STYLE>pravidlo</STYLE>" do HEAD pomocí document.write()

<html>

<head>

<title>preloader v0.2</title>

<style>

 .zobraz {display: block} 

 .nezobraz {display: none} 

</style>

 <script>

 document.write("<style> .skryj {display: none} </style>");

 function set(id,cls){

  document.getElementById(id).className=cls }

 </script>

</head>

<body onload='set("body","skryj");set("load","zobraz")'>

 

<div id="body" class="nezobraz">

 <script> 

  set("body","zobraz"); 

 </script> 

Ahoj. Tohle je suprova stranka, ktera funguje i bez javascriptu. Pro vetsi komfort si ho vsak doporucuji zapnout.

<h1>Zahajeno nahravani.....</h1>

</div>

 

<div id="load" class="skryj">

 

<div id="ifr">  <!-- simulace nahrávání - dobu určuje počet IFRAME tagů =3 -->

<iframe src="." height="60%"></iframe>

<iframe src="." height="60%"></iframe>

<iframe src="." height="60%"></iframe>

<script>

 var i=6 , fpole = document.getElementsByTagName("iframe");

  for(el in fpole){ fpole[el].src="http://www.js-examples.com/forums/viewforum.php?f="+i++ }

</script>

</div>

 

</div>

 

</body></html>

Nahlásit jako SPAM

IP: ...–

Ondřej Šplíchal 0

Posthunter

13. 4. 2007 #8

To Petroff: mno dik za opravu, ale nevidim v tom rozdil... Ve firefoxu to funguje oboji a v Opere (9.1) taky... Funkce se tak jmenuji schvalne; akorat jsem skryval a ukazoval jiny div..

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

14. 4. 2007 #9

TO >> ZELENÁČ <<
Promiň, ale tobě to funguje "díky" chybě, kterou jsem nezmínil: jde o tag <div id="load" style="display: none;">
který nemá žádný display:none obsahovat (vždyť to zařizuje právě funkce skryj()).
Díky této chybě máš při vypnutým JS po ptákách.
A to je od těch mých verzí podstatný rozdíl (vždyť je to tématem diskuse).

.....akorát jsem to nedomyslel s tou simulací pomocí iframů - ta doběhne k </body> velmi rychle (na rozdíl od rozsáhlého dokumentu) a potom jen čeká až se nahrajou obsahy iframů; TEPRVE PAK se spustí ovladač onload.
Pro ověřování korektní funkce se nejlíp hodí velmi dlouhý text (se spoustou tabulek).
......naopak mě rozveselilo <cože to zas provádí IE> když jsem po nahrání stránky použil tlačítko Zpět (předch.stránka)....
Počet stisknutí pro návrat o 1 stránku = N+1 ...kde N je počet iframů, tlačítko je postupně "obsoulouží"

Nahlásit jako SPAM

IP: ...–

Ondřej Šplíchal 0

Posthunter

14. 4. 2007 #10

To Petroff: Asi si nerozumime.. U tveho kodu se pri vypnutem javascriptu zobrazi jak samotny obsah, tak loader.. Mym cilem bylo, aby se nejprve zobrazil loader, po nacteni stranky zmizel a zobrazil se div "body"; pri vypnutem js potom aby se nacitani vubec nezobrazilo a byl videt rovnou obsah.

K tem iframes.. Cilem toho vseho snad je zprijemnit navstevnikovi cekani na dokument nejakou peknou animaci a ne ho umyslne zdrzovat nejakou casovou prodlevou urcovanou iframy, krome toho by snad bylo lepsi pouzit setTimeout.. Nebo jsem to snad pochopil spatne?

Nahlásit jako SPAM

IP: ...–

takinoo 0

Newbie

14. 4. 2007 #11

No OK lidi diky ale......Ja mám hotovú stránku a chcem to spraviť tak že najprv sa zobrazí !!iba!! preloader a potom úplne celá stránka a nie len div.

Nahlásit jako SPAM

IP: ...–

Ondřej Šplíchal 0

Posthunter

14. 4. 2007 #12

to je takovy problem CTRL-C a hodit to do divu???

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

14. 4. 2007 #13

TO >> ZELENÁČ <<
Díky za upozornění. Samozřejmě při vypnutém JS je menší zlo uživateli nic (co se funkčnosti stránky bez JS týče) nesdělovat a nahrát stránku tak jak je, než ji zhyzdit. (kdyby se ty DIVy přehodily,tak se preloader ocitne za koncem stránky, v případě nutnosti a s uzpůsobeným vzhledem lze použít).
Takže tady je ten tvůj kód,teď už funguje přesně dle tvého záměru.

<html>

<head>

<title>preloader v0.1+</title>

<script>

function skryj(){

document.getElementById("body").style.display = "block";

document.getElementById("load").style.display = "none";

}

function ukaz(){

document.getElementById("body").style.display = "none";

document.getElementById("load").style.display = "block";

}

</script>

</head> <body onload="ukaz();">



<div id="body" style="display:none">

Ahoj.

Tohle je suprova stranka, ktera funguje i bez javascriptu.

Pro vetsi komfort si ho vsak doporucuji ZAPNOUT.

Pokud toto ctete,pak mate javascript zapnuty.

A bez zapnuteho javascriptu si nikdy neprectete,ze si ho ZAPNOUT mate.

(To me trochu mate)

<h1>Zahajeno nahravani.....</h1>

</div>

 

<div id="load"><script> skryj(); </script>

 

<!-- COPY/PASTE: ____________BODY část původní stránky_______________ -->

 

<h3> §2a ••••••• zacatek BODY ••••••• </h3>

<div style='border-bottom:1px solid #ff6600; width:95%; font-size:8pt; font-weight:bold;'>

 Kontaktní adresy:

 

 <b>Winterthur penzijní fond a.s.</b>

 Starobrněnská 335/8

 602 00 Brno

 <b>Winterthur pojišťovna a.s.</b>

 Lazarská 13/8

 120 00 Praha 2

 <b>Klientské centrum Praha</b>

 Lazarská 13/8

 <b>Klientské centrum Brno</b>

 Kobližná 20

 <b>Infolinky</b>

 841 111 121

 531 021 112 - pojišťovna

 531 021 111 - penzijní fond

</div>

<iframe src="http://www.axa.cz" height="50%" width="100%"></iframe>

<script> var elF=document.getElementsByTagName("iframe")[0],poc1=poc2=new Date().getTime();

while((poc2-poc1)<1000){poc2=new Date().getTime(); elF.src="http://programujte.com"; elF.src="http://www.axa.cz"}

</script>

<h3> §2b ••••••• konec BODY ••••••• </h3>

 

<!-- ________________________________________________________________ -->

 

</div>

 

</body></html>

A abychom si rozuměli - k vyzkoušení preloaderu (neboli: 1. spustím --> vidím úvodní DIV 2. blik --> vidím hotovou stránku) potřebuješ buď rovnou zakomponovat preloader do funkční web.stránky nebo dát do DIVu [load] něco, co má obdobné chování (ta prodleva by měla být aspoň vteřina - a setTimeout se na to rozhodně použít nedá).
Myslím že pokud si kód spustíš bude vše zřejmé (doufám že i s vypnutým JS - já to nezkoušel, protože
NEVÍM JAK v IE7 VYPNOUT JAVASCRIPT u lokálních souborů ~ FILE://....html - PORAĎTE MI PLS !!!!

Nahlásit jako SPAM

IP: ...–

Ondřej Šplíchal 0

Posthunter

14. 4. 2007 #14

To Petroff:
Chjo, tak jeste jednou:
- div BODY obsahuje samotny obsah stranky
- div LOAD obsahuje preloader
- bez zapnuteho js NEbude div LOAD videt, protoze ma nastaveny DISPLAY: NONE
- se zapnutym js se pak nejdrive skryje BODY a ukaze LOAD a po nacteni skryje LOAD (tedy "preloader") a ukaze BODY

moje verze funguje v Opere 9 a ve Firefoxu 1.5, v IE jsem to netestoval, ale nevidim duvod, proc by to v nem fungovat nemelo..
grrr

Nahlásit jako SPAM

IP: ...–

Ondřej Šplíchal 0

Posthunter

14. 4. 2007 #15



<html>

  <head>

    <title>preloader v0.1.1</title>



    <script type="text/javascript">



      /* ukaze div BODY, skryje div LOAD - tedy preloader */

      function ukaz(){

        document.getElementById("body").style.display = "block";

        document.getElementById("load").style.display = "none";

      }



      /* skryje div BODY, tedy samotny obsah stranky */

      function skryj(){ 

        document.getElementById("body").style.display = "none";

        document.getElementById("load").style.display = "block";

      }

    </script>



  </head>

  <body onload="ukaz();">



<!-- sem se nacpe vse, o by normalne bylo v tagu body -->

    <div id="body">

      Ahoj. Tohle je suprova stranka, ktera funguje i bez javascriptu. Pro vetsi komfort si ho vsak doporucuji zapnout.

    </div>



  

<!-- toto je preloader, ktery se zobrazi pred nactenim stranky; pri vypnutem js se nezobrazi vubec diky CSS -->

    <div id="load" style="display: none;"> 

      <script type="text/javascript">

      skryj();

      </script>



      Nacitam...

    </div>



  </body>

</html>

SE zapnutym JS:

PRI nacitani to ukaze:



Nacitam...

PO nacteni ukaze



Ahoj. Tohle je suprova stranka, ktera funguje i bez javascriptu. Pro vetsi komfort si ho vsak doporucuji zapnout.

BEZ zapnuteho JS:



Ahoj. Tohle je suprova stranka, ktera funguje i bez javascriptu. Pro vetsi komfort si ho vsak doporucuji zapnout.

Lepe uz to vysvetlit neumim :-/

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

14. 4. 2007 #16

TO >> TAKINOO <<
Dej si do editoru verzi 0.1+ (z předchozího příspěvku) - vymaž část ohraničenou čárami ( zač.BODY -konec BODY ) a zkopíruj na onu pozici ze svého kódu část, která leží mezi <BODY> a </BODY>. Pokud máš v tagu <BODY atr1=xxx atr2=...> nějaké atributy jiné než onload, tak je taky zkopíruj (kdybys tam měl onload tak sloučit.
Pak vymaž řádek <title>preloader v0.1+</title>, vezmi ze svého kódu část, která leží mezi <HEAD> a </HEAD>, část a zkopíruj na onu pozici.
Případně si dej mezi značky <div id="body" style="display:none"> a </div> vlastní obsah (text).

__________________________________________________________________________________________________________
Petr

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

14. 4. 2007 #17

Nazdar Zelenáči
Nedorozumění je v tom že u mě je to naopak.
Logicky jsem DIV id="LOAD" označil load, protože se do něho "load" neboli nahrává obsah stránky.
Ten druhý DIV obsahuje text, který se zobrazí do doby,než se načte stránka (tvoří provizorní viditelné tělo=BODY).
Asi nám to funguje oběma, jen používáme jiné názvy (tedy stejné, ale v opačném významu).
Čekám, že dáš k dobru svůj kód a já si ho zkusím na IE.
__________________________________________________________________________________________________________
Petr

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

14. 4. 2007 #18

Funguje ti to.
Akorát jsi stručnější. preloader="Načítám...." Já před tím "Načítám" mám ještě spoustu jiných keců (z většiny jsem je ňák opsal z tvého kódu).
Vyzkoušeno na IE i na FF (ten jsem právě nainstaloval abych mohl vypínat JS, u FF to jde razdva, u IE jsem to už vzdal - asi to nejde (mohu zakázat JS jenom v zónách Internet Intranet Dúvěryhodné - to ale nezahrnuje HTML a JS soubory na HD.
Díky tomu můžu porovnávat např.rychlost - některé moje testovací "stránky" běžely na FF víc jak 10x rychleji než na IE.
Trochu šok.Proto jsem tu definitivní nejsuprovější stránku udělal browseruvzdornou (tj.dobu trvání určuje pouze systém.čas).
__________________________________________________________________________________________________________
Petr

Nahlásit jako SPAM

IP: ...–

takinoo 0

Newbie

15. 4. 2007 #19

Dikes veľmi pekne.Vyskúšam to spraviť.

Nahlásit jako SPAM

IP: ...–

takinoo 0

Newbie

19. 4. 2007 #20

Dikkes veľmi pekne ide mi to! Ešte si to upravím. Paráda!!! Ešte raz dikes!!