Loading
ie4 = (document.all)? true:false
ie5 = (document.all)? true:false
function start()
{
if (ie4 && ie5){
init_ie()
}
}
mojArray = new Array()
mojArray[1] = "500";
mojArray[2] = "1000";
mojArray[3] = "1500";
mojArray[4] = "2000";
mojArray[5] = "2500";
mojArray[6] = "3000";
mojArray[7] = "3500";
mojArray[8] = "4000";
mojArray[9] = "4500";
function init_ie()
{
setTimeout("ramka.style.visibility = 'visible'",1);
for (var licz = 1; licz < 10; licz++)
{
setTimeout("blok_0" + licz + ".style.visibility = 'visible'",mojArray[licz]);
}
for (var licz = 1; licz < 10; licz++)
{
setTimeout("blok_0" + licz + ".style.visibility = 'hidden'",5500);
}
setTimeout("ramka.style.visibility = 'hidden'",5500);
setTimeout("strona.style.visibility = 'visible'",6000);
}
Loading
Ciekawy bajer, prawda. Opis ten zajmie się
stworzeniem "Loadinga" dla IE 4.x. Netscape i starsze przeglądarki od IE 4.x nie będą widziały naszego
skryptu. Z tego powodu spokojnie możemy stosować go na naszych stronach bez obawy o
ewentualne konflikty z innymi przeglądarkami.Na początek zajmijmy się stworzeniem wyglądu naszego loadinga.
<div id="blok_01"
style="position:absolute;height:10;width:10;background:blue;top:100;left:50;visibility:hidden"></div><div
id="blok_02"
style="position:absolute;height:10;width:10;background:blue;top:100;left:62;visibility:hidden"></div><div
id="blok_03"
style="position:absolute;height:10;width:10;background:blue;top:100;left:74;visibility:hidden"></div><div
id="blok_04"
style="position:absolute;height:10;width:10;background:blue;top:100;left:86;visibility:hidden"></div><div
id="blok_05"
style="position:absolute;height:10;width:10;background:blue;top:100;left:98;visibility:hidden"></div><div
id="blok_06"
style="position:absolute;height:10;width:10;background:blue;top:100;left:110;visibility:hidden"></div><div
id="blok_07"
style="position:absolute;height:10;width:10;background:blue;top:100;left:122;visibility:hidden"></div><div
id="blok_08"
style="position:absolute;height:10;width:10;background:blue;top:100;left:134;visibility:hidden"></div><div
id="blok_09"
style="position:absolute;height:10;width:10;background:blue;top:100;left:146;visibility:hidden"></div>
Ten fragment kodu umieszczamy pomiędzy znacznikami
<BODY> </BODY>. Tworzy on dziewięć bloków o wymiarach 10x10 pikseli. Każdy
z bloków posiada swój id. Ponumerowałem je, aby później skrypt mógł wyświetlić je
w odpowiedniej kolejności. Każdy z naszych bloków musi mieć status "hidden"
(ukryty). Następnym elementem który umieścimy to ramka.
<div id="ramka"
style="visibility:hidden"><div
style="position:absolute;top:78;left:48;font-size:12">
<p>Wczytuje stronę :</p>
</div><div style="position:absolute;top:98;left:48;">
<table border="1" width="110" cellspacing="0"
cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</div><div style="position:absolute;top:118;left:48;font-size:12">
<p>0%</p>
</div><div style="position:absolute;top:118;left:128;font-size:12">
<p>100%</p>
</div></div>
Teraz w sekcji <HEAD> </HEAD> umieścimy
skrypt który wyświetli odpowiednie elementy naszego "loadinga" w odpowiednim
momencie.
Na początek zadeklarujemy zmienne, które pomogą
zidentifikować rodzaj przeglądarki:
ie4 = (document.all)? true:false
ie5 = (document.all)? true:false
Następnie tworzymy funkcję start() która
dopuści IE4 i IE5 do naszego skryptu.
function start()
{
if (ie4 && ie5){
init_ie()
}
}
Teraz zainicjujemy funkcję init_ie().
function init_ie()
{
setTimeout("ramka.style.visibility = 'visible'",1);
}
Jak widzimy użyliśmy tu funkcji setTimeout()
powodującej iż nasza ramka ma status visible (jest widzialna).
Następnie do funkcji init_ie() wklejamy pętle umożliwiającą
wyświetlenie naszych bloków w odpowiedniej kolejności.
for (var licz = 1; licz < 10; licz++)
{
setTimeout("blok_0" + licz + ".style.visibility =
'visible'",mojArray[licz]);
}
Jak widzimy pętla ta wyświetli nam
nasze dziewięć bloków. Parametr mojArray[licz] będzie zawierał wartość
milisekund po których ma następować wyświetlanie bloków (co 500). Inicjujemy je poza
funkcją init_ie().
mojArray = new Array()
mojArray[1] = "500";
mojArray[2] = "1000";
mojArray[3] = "1500";
mojArray[4] = "2000";
mojArray[5] = "2500";
mojArray[6] = "3000";
mojArray[7] = "3500";
mojArray[8] = "4000";
mojArray[9] = "4500";
Teraz znowu powracamy do naszej funkcji
init_ie(). Wklejmy kod odpowiadający za ukrycie bloków oraz ramki.
for (var licz = 1; licz < 10; licz++)
{
setTimeout("blok_0" + licz + ".style.visibility = 'hidden'",5500);
}
setTimeout("ramka.style.visibility = 'hidden'",5500);
setTimeout("strona.style.visibility = 'visible'",6000);
I to koniec z naszym skryptem. Całość
powinna wyglądać tak:
<script
LANGUAGE="JavaScript">
ie4 = (document.all)? true:false
ie5 = (document.all)? true:false
function start()
{
if (ie4 && ie5){
init_ie()
}
}
mojArray = new Array()
mojArray[1] = "500";
mojArray[2] = "1000";
mojArray[3] = "1500";
mojArray[4] = "2000";
mojArray[5] = "2500";
mojArray[6] = "3000";
mojArray[7] = "3500";
mojArray[8] = "4000";
mojArray[9] = "4500";
function init_ie()
{
setTimeout("ramka.style.visibility = 'visible'",1);
for (var licz = 1; licz < 10; licz++)
{
setTimeout("blok_0" + licz + ".style.visibility =
'visible'",mojArray[licz]);
}
for (var licz = 1; licz < 10; licz++)
{
setTimeout("blok_0" + licz + ".style.visibility = 'hidden'",5500);
}
setTimeout("ramka.style.visibility = 'hidden'",5500);
setTimeout("strona.style.visibility = 'visible'",6000);
}
</script>
Teraz pozostaje nam wywołanie naszego
skryptu:
<body onload="start()">
Aby skrypt poprawnie działał musimy
zawartość naszej strony umieścić pomiędzy znaczniki:
<div
style="visibility:hidden" id="strona"> </div>
W przeciwnym razie zawartość naszej
strony przy wczytywaniu będzie nakładała się na naszego loadinga.
Copyright
(c) 1998-99 by Skryptomania
Wczytuje stronę :
0%
100%
Wyszukiwarka
Podobne podstrony:
image to loadload modules list2BITSIE Another way to fix IE6 slow page load (2)image to loadloadfunction com loadload in framesVolkswagen Up e Load DEfunction com load typelibVolkswagen e load up 2016?Volkswagen Up Load DEload alertsVolkswageb load up 2016?KD LOAD BITMAP (2)więcej podobnych podstron