Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: cos w stylu...
Forum PHP.pl > Forum > Przedszkole
andixxx
29.07.2006, 01:42:45
hej:) interesuje mnie cos w stylu preloadera, ale nie w zadnym flashu, tylko w np. javascripcie.. dokladnie mam na mysli takie cos, ze zanim strona zostanie wczytana w calosci pokaze sie jeden prosty, losowy obrazek, przyslaniajacy wszystko, az do czasu wczytania wszystkich danych i plikow:) a gdy strona zostanie zaladowana w 100% obrazek znika i pojawia sie gotowa strona:) wiecie o co chodzi ;D wiec prosze o pomoc smile.gif
kosheen2k
29.07.2006, 07:42:43
poszukaj gdzieś w theme'ach do forum phpBB. Bodajże jeden Invision Red się nazywa.

są stworzone dwie funkcje w JS, mianowicie:

- jedna, która tworzy layer (bądź div'a) który jest wypełniony tłem na całej szerokości strony.
- druga zaś wyłącza widoczność tego layer'a. przypisuje się ją w tagu <body> jako np. onLoad="wylaczLayer();'

Gdybyś nie mógł sobie poradzić napisz mi na PW.

P.S. Gdyby nie interesowało Cię coś takiego, zajrzyj na stronę www.asmax.pl. Oni mają prosty preloader w JS zrobiony, wg mnie bardzo fajny i łatwy w zrozumieniu kod. Ładuje wszystkie obrazki, po czym przekierowuje na inną stronę podaną właśnie w skrypcie.

Pozdrawiam
remiq26
30.07.2006, 07:23:47
czesc mozna to wykonac np. tak:

[HTML] pobierz, plaintext 
  1. <script LANGUAGE="JavaScript">
  2. <!-- 
  3. var Obr = new Array();
  4. var il_bledow = 0;
  5. var afterOK;
  6. var afterNotOK;
  7. var postep = 0;
  8.  
  9. function Laduj(plik)
  10. {
  11. 	if (document.images)
  12. 	{
  13.     	var nast = Obr.length;
  14. 		Obr[nast] = new Image();
  15. 		Obr[nast].onerror = bladObr;
  16. 		Obr[nast].src = plik;
  17. 	}	
  18. }
  19.  
  20. function Sprawdz()
  21. {
  22. 	var notcompl = 0;
  23. 	var compl = 0;
  24. 	var w = Obr.length;
  25.  
  26. 	for (var i = 0; i < w; i++)
  27. 	{
  28.     	if (Obr[i].complete) compl++; else notcompl++; 
  29. 	}
  30.  
  31. 	postep = compl/w*100;
  32. 	Rysuj_pasek_postepu();
  33. 	if (notcompl > il_bledow) setTimeout("Sprawdz();", 100);
  34. 	else if (notcompl == 0) eval(afterOK);
  35. 	else if (notcompl == il_bledow) eval(afterNotOK);
  36. }
  37.  
  38. function Ladowanie()
  39. {
  40.  
  41. 	Laduj("images/tlo.gif");
  42. 	Laduj("images/szary.gif");
  43. 	Laduj("images/niebieski.gif");
  44. 	Laduj("images/upr.gif");
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52. 		Sprawdz();
  53. }
  54.  
  55. function bladObr()
  56. {
  57. 	il_bledow++;
  58. }
  59.  
  60. function Rysuj_pasek_postepu()
  61. {
  62. 	var strPostep = "" + postep;
  63. 	if (strPostep.substring(0,3) == "100") strPostep = "100%"; else strPostep = strPostep.substring(0,2) + "%";
  64. 	var tabela = "<table width=\"270\" border=\"0\"><tr><td width=\"" + ((postep != 0)?(parseInt(strPostep)*2):"1") + "\" bgcolor=\"#FFFFFF\"></td><td></td><td width=\"50\"><b><font face=\"Verdana\" size=\"2\">" + strPostep + "</td></tr></table>";
  65. 	naglowek.innerHTML = ladow + tabela;
  66. }
  67.  
  68. function Init()
  69. {
  70.  
  71. 	nojava.innerHTML = " ";
  72. 	setTimeout("nojava.innerHTML = 'Jeśli witryna nie zostanie poprawnie załadowana kliknij LOADING..,';", 25000);
  73.  
  74.  
  75. 	afterOK = "window.status = 'Ładowanie witryny przebiegło poprawnie!'; setTimeout(\"window.location.href='loader_o_firmie.php'\", 500);";
  76. 	afterNotOK = "alert('Błąd w ładowaniu strony...kliknij napis LOADING....\\n ' + (Obr.length - il_bledow) + '' + il_bledow + '');";
  77. 	ladow = "<br>";
  78.  
  79. 	naglowek.innerHTML = ladow;
  80. 	Ladowanie();
  81. }
  82.  
  83.  
  84.  
  85. //-->
  86. </SCRIPT>
[HTML] pobierz, plaintext


A potem jeszcze mam tak :

[HTML] pobierz, plaintext 
  1. <body bgcolor="#6699FE" text="#000000" link="#000000" vlink="#000000" alink="#000000" topmargin="0" leftmargin="0" onLoad="Init()">
  2. <!-- frame buster - code by Gordon McComb -->
  3. <script language="JavaScript" type="text/javascript">
  4. 	<!-- Hide script from older browsers
  5. 	setTimeout ("changePage()", 0);
  6.  
  7. 	function changePage() {
  8. 		if (self.parent.frames.length != 0)
  9. 			self.parent.location=document.location;
  10. 		}
  11.  
  12. 	// end hiding contents -->
  13.  
  14. </script>
  15.   <center>
  16.   <table height="90%" width="90%">
  17. <td width="90%" style="padding: 0cm" height="90%" valign="middle" align="center">
  18.       <font face="Verdana" size="3" color="#FFFFFF">Trwa wczytywanie grafiki..</font><br>
  19.       <p><font face="Verdana" size="3"><b><a href="loader_o_firmie.php"><font color="#FFFFFF">  LOADING
  20.       ...</font></a></b></font>
  21.       <p>
  22.       <div id="naglowek"></div>
  23.       </td>
  24.   </table>
  25.   </center>
  26.   <div align="center" id="nojava"><b><font color="#FFFFFF" size="2" face="Verdana">STRONA
  27.     NIE ZOSTAŁA POPRAWNIE ZAŁADOWANA KLIKNIJ "LOADING"</font></b></div>
  28.  
  29.  
  30. </html>
[HTML] pobierz, plaintext


Może się przydac wprawdze juz dawno tego nie wykozystuje ale jak chcesz zobaczyc jak to wygkada w dzialaniu to wejdz na jedną z moich pierwszych stron jeszcze to tam widnieje
http://www.biall.jaworzno.pl/oferta.php

Pozdrawiam jak bedziesz mial jakies problemy to pisz
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.