Javascript preloader – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Javascript preloader – JavaScript, AJAX, jQuery – Fórum – Programujte.comJavascript preloader – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
takinoo0
Newbie
24. 3. 2007   #1
-
0
-

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: ...–
Reklama
Reklama
olgo0
Věrný člen
25. 3. 2007   #2
-
0
-

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
26. 3. 2007   #3
-
0
-

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: ...–
takinoo0
Newbie
26. 3. 2007   #4
-
0
-

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: ...–
26. 3. 2007   #5
-
0
-



<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
-
0
-

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
-
0
-

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: ...–
13. 4. 2007   #8
-
0
-

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
-
0
-

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: ...–
14. 4. 2007   #10
-
0
-

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: ...–
takinoo0
Newbie
14. 4. 2007   #11
-
0
-

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: ...–
14. 4. 2007   #12
-
0
-

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
-
0
-

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: ...–
14. 4. 2007   #14
-
0
-

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: ...–
14. 4. 2007   #15
-
0
-



<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
-
0
-

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
-
0
-

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
-
0
-

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: ...–
takinoo0
Newbie
15. 4. 2007   #19
-
0
-

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

Nahlásit jako SPAM
IP: ...–
takinoo0
Newbie
19. 4. 2007   #20
-
0
-

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

Nahlásit jako SPAM
IP: ...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 15 hostů

Podobná vlákna

Javascript — založil Onsi

JavaScript — založil kikinka

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý