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


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


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.