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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript1.1"> <!-- begin hiding // You may modify the following: var locationAfterPreload = "preload2.html" // URL of the page after preload finishes var lengthOfPreloadBar = 0 // Length of preload bar (in pixels) var heightOfPreloadBar = 0 // Height of preload bar (in pixels) // Put the URLs of images that you want to preload below (as many as you want) var yourImages = new Array("images/bg_001.jpg","images/logo.png") // Do not modify anything beyond this point! if (document.images) { var dots = new Array() dots[0] = new Image(1,1) dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size) dots[1] = new Image(1,1) dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above) var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0 var loaded = new Array(),i,covered,timerID var leftOverWidth = lengthOfPreloadBar%coverage } function loadImages() { for (i = 0; i < yourImages.length; i++) { preImages[i] = new Image() preImages[i].src = yourImages[i] } for (i = 0; i < preImages.length; i++) { loaded[i] = false } checkLoad() } var timeExpired=false; setTimeout("timeExpired = true;",6000); function checkLoad() { if (timeExpired && currCount == preImages.length) { location.replace(locationAfterPreload) return } for (i = 0; i <= preImages.length; i++) { if (loaded[i] == false && preImages[i].complete) { loaded[i] = true eval("document.img" + currCount + ".src=dots[1].src") currCount++ } } timerID = setTimeout("checkLoad()",10) } // end hiding --> </script> </head> <body> if (document.images) { var preloadBar = '' for (i = 0; i < yourImages.length-1; i++) { preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">' } preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">' document.write(preloadBar) loadImages() } </script> </div> </body> </html>
I preload2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html { height: 95%; } body { height:97%; margin: 0px; margin-right:10px; padding: 0px; background: #D6D6D6 url(images/bg_001.jpg) repeat-x left top; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; color: #9F9F9F; text-align: center; } a { font-size: 14px; color: #A07C51; font-style: italic; } a:visited { color: #A07C51; } a:hover { color: #A07C51; } a:active { color: #A07C51; } </style> <script type="text/javascript"><!-- document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>"); function initImage() { imageId = 'thephoto'; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() {initImage()} // --> </script> <script language="JavaScript1.1"> <!-- begin hiding // You may modify the following: var locationAfterPreload = "page.html" // URL of the page after preload finishes var lengthOfPreloadBar = 150 // Length of preload bar (in pixels) var heightOfPreloadBar = 15 // Height of preload bar (in pixels) // Put the URLs of images that you want to preload below (as many as you want) var yourImages = new Array("firmy\gray\cekol_rgb.png","firmy\gray\fakro_logo.png", itd...) // Do not modify anything beyond this point! if (document.images) { var dots = new Array() dots[0] = new Image(1,1) dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size) dots[1] = new Image(1,1) dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above) var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0 var loaded = new Array(),i,covered,timerID var leftOverWidth = lengthOfPreloadBar%coverage } function loadImages() { for (i = 0; i < yourImages.length; i++) { preImages[i] = new Image() preImages[i].src = yourImages[i] } for (i = 0; i < preImages.length; i++) { loaded[i] = false } checkLoad() } var timeExpired=false; setTimeout("timeExpired = true;",6000); function checkLoad() { if (timeExpired && currCount == preImages.length) { location.replace(locationAfterPreload) return } for (i = 0; i <= preImages.length; i++) { if (loaded[i] == false && preImages[i].complete) { loaded[i] = true eval("document.img" + currCount + ".src=dots[1].src") currCount++ } } timerID = setTimeout("checkLoad()",10) } // end hiding --> </script> </head> <body> <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 "> <div class="greenBorder" style="display: table; height: 100%; #position: relative; overflow: hidden;"> <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div class="greenBorder" style=" #position: relative; #top: -50%"> <script language="JavaScript1.1"> if (document.images) { var preloadBar = '' for (i = 0; i < yourImages.length-1; i++) { preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">' } preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">' document.write(preloadBar) loadImages() } </script> </div> </div> </div> </div> </body> </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.