Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Dwa problemy z moim projektem strony. JavaScript i osadzanie SWF
kyvaith
post
Post #1





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 8.01.2011

Ostrzeżenie: (0%)
-----

Witam

Mam dwa małe problemy z moim projektem strony mieszczącym się pod adresem Tarti.pl.
Pierwszy problem dotyczy skryptu preloadingu obrazków. Mam to rozwiązane w taki sposób, że jest pierwsza strona preloadingująca tło oraz logo na stronie właściwego preloadingu, oraz właściwą stronę preloadingu ładującą obrazki na stronie głównej serwisu. Kod wygląda następująco:

Preloading1:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Tarti s.c. - Materiały Budowlane</title>
  6.  
  7. <script language="JavaScript1.1">
  8. <!-- begin hiding
  9.  
  10. // You may modify the following:
  11. 	var locationAfterPreload = "preload2.html" // URL of the page after preload finishes
  12. 	var lengthOfPreloadBar = 0 // Length of preload bar (in pixels)
  13. 	var heightOfPreloadBar = 0 // Height of preload bar (in pixels)
  14. 	// Put the URLs of images that you want to preload below (as many as you want)
  15. 	var yourImages = new Array("images/bg_001.jpg","images/logo.png")
  16.  
  17. // Do not modify anything beyond this point!
  18. if (document.images) {
  19. 	var dots = new Array() 
  20. 	dots[0] = new Image(1,1)
  21. 	dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
  22. 	dots[1] = new Image(1,1)
  23. 	dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
  24. 	var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
  25. 	var loaded = new Array(),i,covered,timerID
  26. 	var leftOverWidth = lengthOfPreloadBar%coverage
  27. }
  28. function loadImages() { 
  29. 	for (i = 0; i < yourImages.length; i++) { 
  30. 		preImages[i] = new Image()
  31. 		preImages[i].src = yourImages[i]
  32. 	}
  33. 	for (i = 0; i < preImages.length; i++) { 
  34. 		loaded[i] = false
  35. 	}
  36. 	checkLoad()
  37. }
  38. var timeExpired=false;
  39. setTimeout("timeExpired = true;",6000);
  40.  
  41. function checkLoad() {
  42.    if (timeExpired && currCount == preImages.length) {
  43. 		location.replace(locationAfterPreload)
  44. 		return
  45.    }
  46.    for (i = 0; i <= preImages.length; i++) {
  47. 		if (loaded[i] == false && preImages[i].complete) {
  48. 			 loaded[i] = true
  49. 			 eval("document.img" + currCount + ".src=dots[1].src")
  50. 			 currCount++
  51. 		}
  52.    }
  53.    timerID = setTimeout("checkLoad()",10)
  54. }
  55. // end hiding -->
  56. </script>
  57.  
  58. </head>
  59.  
  60. <body>
  61. <div>	<script language="JavaScript1.1">
  62. 		if (document.images) {
  63. 			var preloadBar = ''
  64. 			for (i = 0; i < yourImages.length-1; i++) {
  65. 				preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
  66. 			}
  67. 			preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
  68. 			document.write(preloadBar)
  69. 			loadImages()
  70. 		}
  71. 		</script>
  72.  
  73. 	  </div>
  74.  
  75.  
  76. </body>
  77. </html>
[HTML] pobierz, plaintext


I preload2:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Tarti s.c. - Materiały Budowlane</title>
  6. <style type="text/css">
  7. html {
  8. height: 95%;
  9. }
  10. body {
  11. 	height:97%;
  12. 	margin: 0px;
  13. 	margin-right:10px;
  14. 	padding: 0px;
  15. 	background: #D6D6D6 url(images/bg_001.jpg) repeat-x left top;
  16. 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  17. 	font-size: 11px;
  18. 	color: #9F9F9F;
  19. 	text-align: center;
  20.  
  21. }
  22. a {
  23. 	font-size: 14px;
  24. 	color: #A07C51;
  25. 	font-style: italic;
  26. }
  27. a:visited {
  28. 	color: #A07C51;
  29. }
  30. a:hover {
  31. 	color: #A07C51;
  32. }
  33. a:active {
  34. 	color: #A07C51;
  35. }
  36. </style>
  37.  
  38.  
  39. <script type="text/javascript"><!--
  40. document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");
  41.  
  42. function initImage() {
  43. 	imageId = 'thephoto';
  44. 	image = document.getElementById(imageId);
  45. 	setOpacity(image, 0);
  46. 	image.style.visibility = "visible";
  47. 	fadeIn(imageId,0);
  48. }
  49. function fadeIn(objId,opacity) {
  50. 	if (document.getElementById) {
  51. 		obj = document.getElementById(objId);
  52. 		if (opacity <= 100) {
  53. 			setOpacity(obj, opacity);
  54. 			opacity += 10;
  55. 			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
  56. 		}
  57. 	}
  58. }
  59. function setOpacity(obj, opacity) {
  60. 	opacity = (opacity == 100)?99.999:opacity;
  61. 	// IE/Win
  62. 	obj.style.filter = "alpha(opacity:"+opacity+")";
  63. 	// Safari<1.2, Konqueror
  64. 	obj.style.KHTMLOpacity = opacity/100;
  65. 	// Older Mozilla and Firefox
  66. 	obj.style.MozOpacity = opacity/100;
  67. 	// Safari 1.2, newer Firefox and Mozilla, CSS3
  68. 	obj.style.opacity = opacity/100;
  69. }
  70. window.onload = function() {initImage()}
  71. // -->
  72. </script>
  73.  
  74.  
  75. <script language="JavaScript1.1">
  76. <!-- begin hiding
  77.  
  78. // You may modify the following:
  79. 	var locationAfterPreload = "page.html" // URL of the page after preload finishes
  80. 	var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
  81. 	var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
  82. 	// Put the URLs of images that you want to preload below (as many as you want)
  83. 	var yourImages = new Array("firmy\gray\cekol_rgb.png","firmy\gray\fakro_logo.png", itd...)
  84.  
  85. // Do not modify anything beyond this point!
  86. if (document.images) {
  87. 	var dots = new Array() 
  88. 	dots[0] = new Image(1,1)
  89. 	dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
  90. 	dots[1] = new Image(1,1)
  91. 	dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
  92. 	var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
  93. 	var loaded = new Array(),i,covered,timerID
  94. 	var leftOverWidth = lengthOfPreloadBar%coverage
  95. }
  96. function loadImages() { 
  97. 	for (i = 0; i < yourImages.length; i++) { 
  98. 		preImages[i] = new Image()
  99. 		preImages[i].src = yourImages[i]
  100. 	}
  101. 	for (i = 0; i < preImages.length; i++) { 
  102. 		loaded[i] = false
  103. 	}
  104. 	checkLoad()
  105. }
  106. var timeExpired=false;
  107. setTimeout("timeExpired = true;",6000);
  108.  
  109. function checkLoad() {
  110.    if (timeExpired && currCount == preImages.length) {
  111. 		location.replace(locationAfterPreload)
  112. 		return
  113.    }
  114.    for (i = 0; i <= preImages.length; i++) {
  115. 		if (loaded[i] == false && preImages[i].complete) {
  116. 			 loaded[i] = true
  117. 			 eval("document.img" + currCount + ".src=dots[1].src")
  118. 			 currCount++
  119. 		}
  120.    }
  121.    timerID = setTimeout("checkLoad()",10)
  122. }
  123. // end hiding -->
  124. </script>
  125.  
  126.  
  127.  
  128. </head>
  129.  
  130. <body>
  131. <div style="color: #666; font-size: 18px; font-style: italic; font-weight: bold; width: 1000px; height:100%; margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto ">
  132. 	 <div class="greenBorder" style="display: table; height: 100%; #position: relative; overflow: hidden;">
  133. 	<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
  134. 	  <div class="greenBorder" style=" #position: relative; #top: -50%">
  135. <p><img src="images/logo.png" width="942" height="430" id='thephoto' /></p>
  136.   <p>&nbsp;</p>
  137.   <p>&nbsp;&nbsp;&nbsp;Ładowanie strony...</p></br>
  138.  
  139. 		<script language="JavaScript1.1">
  140. 		if (document.images) {
  141. 			var preloadBar = ''
  142. 			for (i = 0; i < yourImages.length-1; i++) {
  143. 				preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
  144. 			}
  145. 			preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
  146. 			document.write(preloadBar)
  147. 			loadImages()
  148. 		}
  149. 		</script>
  150.  
  151. 	  </div>
  152. 	</div>
  153.   </div>
  154. </div>
  155. <p align="right"><a href="page.html">Pomiń ładowanie</a></p>
  156.  
  157. </body>
  158. </html>
[HTML] pobierz, plaintext


Problem polega na tym, że logo na stronie ładującej obrazki serwisu pojawia się dopiero po wykonaniu skryptu preloadingu obrazków serwisu, a ja bym chciał, by najpierw pojawiło się logo (które notabene jest preloadingowane na stronie preload1) a dopier później był wykonywany skrypt ładowania obrazków serwisu.

///
Tu chciałem umieścić drugie pytanie ale niestety kreator postu twierdzi że wiadomość była by zbyt długa, więc jak uda się znaleźć rozwiązanie pierwszego problemu wyedytuję post wrzucając drugie pytanie.
///


Proszę o pomoc i wyrozumiałość - to dopiero trzecia strona internetowa jaką zrobiłem ;-)
Pozdrawiam.

Ten post edytował kyvaith 8.01.2011, 13:57:32
Go to the top of the page
+Quote Post

Posty w temacie
- kyvaith   [JavaScript]Dwa problemy z moim projektem strony. JavaScript i osadzanie SWF   8.01.2011, 13:06:08

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 08:38
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn