PDA

View Full Version : HTML Javascript Preloader


jbarnes
01-31-2010, 11:26 PM
Hey all,

I am creating a modified Javascript preloader to enhance the speed of my HTML site...

The preloader loads fine on safari/firefox; however, on the deathstar browser (IE) it loads to about 97% then stalls and times out.

Can anyone look at the coding and suggest a route of fixing the problem, or perhaps lead me to a link that will help...

Thanks in advance! and I totally understand if the Mods want to move this to another location.

Site: www.rockspire.com

Code:

<html>
<head>
<title>Preload Image Page</title>
<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
var locationAfterPreload = "index2.html" // URL of the page after preload finishes
var lengthOfPreloadBar = 450 // Length of preload bar (in pixels)
var heightOfPreloadBar = 10 // 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("http://rockspire.com/images/lparch1.jpg",
"http://rockspire.com/images/lparch2.jpg",
"http://rockspire.com/images/lparch3.jpg",
"http://rockspire.com/images/lparch4.jpg",
"http://rockspire.com/images/lparch5.jpg",
"http://rockspire.com/images/lparch6.jpg",
"http://rockspire.com/images/lparch7.jpg",
"http://rockspire.com/images/lparch8.jpg",
"http://rockspire.com/images/lparch9.jpg",
"http://rockspire.com/images/lpart1.jpg",
"http://rockspire.com/images/lpart2.jpg",
"http://rockspire.com/images/lpart3.jpg",
"http://rockspire.com/images/lpart4.jpg",
"http://rockspire.com/images/lpart5.jpg",
"http://rockspire.com/images/lpart6.jpg",
"http://rockspire.com/images/lpart7.jpg",
"http://rockspire.com/images/lpbetty1.jpg",
"http://rockspire.com/images/lpbetty2.jpg",
"http://rockspire.com/images/lpbetty3.jpg",
"http://rockspire.com/images/lpbetty4.jpg",
"http://rockspire.com/images/lpbetty5.jpg",
"http://rockspire.com/images/lpnature1.jpg",
"http://rockspire.com/images/lpnature2.jpg",
"http://rockspire.com/images/lpnature3.jpg",
"http://rockspire.com/images/lpnature4.jpg",
"http://rockspire.com/images/lpnature5.jpg",
"http://rockspire.com/images/lpnature6.jpg",
"http://rockspire.com/images/lpnature7.jpg",
"http://rockspire.com/images/lpnature8.jpg",
"http://rockspire.com/images/lpnature9.jpg",
"http://rockspire.com/images/lpnature10.jpg",
"http://rockspire.com/images/lpnature11.jpg",
"http://rockspire.com/images/thumbnail_arch1.jpg",
"http://rockspire.com/images/thumbnail_arch1bw.jpg",
"http://rockspire.com/images/thumbnail_arch10.jpg",
"http://rockspire.com/images/thumbnail_arch10bw.jpg",
"http://rockspire.com/images/thumbnail_arch11.jpg",
"http://rockspire.com/images/thumbnail_arch11bw.jpg",
"http://rockspire.com/images/thumbnail_arch2.jpg",
"http://rockspire.com/images/thumbnail_arch2bw.jpg",
"http://rockspire.com/images/thumbnail_arch3.jpg",
"http://rockspire.com/images/thumbnail_arch3bw.jpg",
"http://rockspire.com/images/thumbnail_arch4.jpg",
"http://rockspire.com/images/thumbnail_arch4bw.jpg",
"http://rockspire.com/images/thumbnail_arch5.jpg",
"http://rockspire.com/images/thumbnail_arch5bw.jpg",
"http://rockspire.com/images/thumbnail_arch6.jpg",
"http://rockspire.com/images/thumbnail_arch6bw.jpg",
"http://rockspire.com/images/thumbnail_arch7.jpg",
"http://rockspire.com/images/thumbnail_arch7bw.jpg",
"http://rockspire.com/images/thumbnail_arch8.jpg",
"http://rockspire.com/images/thumbnail_arch8bw.jpg",
"http://rockspire.com/images/thumbnail_arch9.jpg",
"http://rockspire.com/images/thumbnail_arch9bw.jpg",
"http://rockspire.com/images/thumbnail_art1.jpg",
"http://rockspire.com/images/thumbnail_art1bw.jpg",
"http://rockspire.com/images/thumbnail_art2.jpg",
"http://rockspire.com/images/thumbnail_art2bw.jpg",
"http://rockspire.com/images/thumbnail_art3.jpg",
"http://rockspire.com/images/thumbnail_art3bw.jpg",
"http://rockspire.com/images/thumbnail_art4.jpg",
"http://rockspire.com/images/thumbnail_art4bw.jpg",
"http://rockspire.com/images/thumbnail_art5.jpg",
"http://rockspire.com/images/thumbnail_art5bw.jpg",
"http://rockspire.com/images/thumbnail_art6.jpg",
"http://rockspire.com/images/thumbnail_art6bw.jpg",
"http://rockspire.com/images/thumbnail_art7.jpg",
"http://rockspire.com/images/thumbnail_art7bw.jpg",
"http://rockspire.com/images/thumbnail_b1.jpg",
"http://rockspire.com/images/thumbnail_b1bw.jpg",
"http://rockspire.com/images/thumbnail_b2.jpg",
"http://rockspire.com/images/thumbnail_b2bw.jpg",
"http://rockspire.com/images/thumbnail_b3.jpg",
"http://rockspire.com/images/thumbnail_b3bw.jpg",
"http://rockspire.com/images/thumbnail_b4.jpg",
"http://rockspire.com/images/thumbnail_b4bw.jpg",
"http://rockspire.com/images/thumbnail_b5.jpg",
"http://rockspire.com/images/thumbnail_b5bw.jpg",
"http://rockspire.com/images/thumbnail_nat1.jpg",
"http://rockspire.com/images/thumbnail_nat1bw.jpg",
"http://rockspire.com/images/thumbnail_nat2.jpg",
"http://rockspire.com/images/thumbnail_nat2bw.jpg",
"http://rockspire.com/images/thumbnail_nat3.jpg",
"http://rockspire.com/images/thumbnail_nat3bw.jpg",
"http://rockspire.com/images/thumbnail_nat4.jpg",
"http://rockspire.com/images/thumbnail_nat4bw.jpg",
"http://rockspire.com/images/thumbnail_nat5.jpg",
"http://rockspire.com/images/thumbnail_nat5bw.jpg",
"http://rockspire.com/images/thumbnail_nat6.jpg",
"http://rockspire.com/images/thumbnail_nat6bw.jpg",
"http://rockspire.com/images/thumbnail_nat7.jpg",
"http://rockspire.com/images/thumbnail_nat7bw.jpg",
"http://rockspire.com/images/thumbnail_nat8.jpg",
"http://rockspire.com/images/thumbnail_nat8bw.jpg",
"http://rockspire.com/images/thumbnail_nat9.jpg",
"http://rockspire.com/images/thumbnail_nat9bw.jpg",
"http://rockspire.com/images/thumbnail_nat10.jpg",
"http://rockspire.com/images/thumbnail_nat10bw.jpg",
"http://rockspire.com/images/thumbnail_nat11.jpg",
"http://rockspire.com/images/thumbnail_nat11bw.jpg",
"http://rockspire.com/images/index_01.jpg",
"http://rockspire.com/images/index_02.jpg",
"http://rockspire.com/images/index_04.jpg",
"http://rockspire.com/images/index_05.jpg",
"http://rockspire.com/images/index_06.jpg",
"http://rockspire.com/images/index_13.jpg",
"http://rockspire.com/images/index_14.jpg",
"http://rockspire.com/images/nature_pic_area.jpg",
"http://rockspire.com/images/art_pic_area.jpg",
"http://rockspire.com/images/arch_01.jpg",
"http://rockspire.com/images/arch_02.jpg",
"http://rockspire.com/images/arch_04.jpg",
"http://rockspire.com/images/arch_06.jpg",
"http://rockspire.com/images/arch_07.jpg",
"http://rockspire.com/images/arch_11.jpg",
"http://rockspire.com/images/arch_12.jpg",
"http://rockspire.com/images/arch_13.jpg",
"http://rockspire.com/images/arch_20.jpg",
"http://rockspire.com/images/arch_21.jpg",
"http://rockspire.com/images/overview.pdf",
"http://rockspire.com/images/Rockspire_Site_Map.pdf",
"http://rockspire.com/images/main_concept_image.jpg",
"http://rockspire.com/images/main_contact_image.jpg",
"http://rockspire.com/images/contact_main_pic.jpg",
"http://rockspire.com/images/main_events_image.jpg",
"http://rockspire.com/images/main_inspiration_image.jpg",
"http://rockspire.com/images/main_manifesto_image.jpg",
"http://rockspire.com/images/main_photos_image.jpg",
"http://rockspire.com/images/main_resources_image.jpg"
)

// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "images/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 = "images/red.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()
}
function checkLoad() {
if (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>

<style type="text/css">
<!--
body p {
font-family: "Helvetica Neue";
}
.preload_body_rule {
font-family: "Helvetica Neue";
font-size: 12px;
color: #666;
padding-top: 30px;
}
.Welcome_rule {
font-family: "Helvetica Neue";
font-size: 18px;
color: #333;
}
a {
font-family: Helvetica Neue;
font-size: 12px;
color: #666;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #666;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #666;
}
.er {
font-style: italic;
font-family: "Helvetica Neue";
font-size: 12px;
color: #666;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>

<body bgcolor="#FFFFFF">

<center>
<p><font size="4" class="preload_body_rule"><span class="Welcome_rule"><br>
<br><br><br><br>WELCOME TO ROCKSPIRE...</span><br>
</font><span class="er"><font size="4" class="er">A new concept in future living</font></span><font size="4" class="preload_body_rule"><br>
<br>
</font><font size="4" class="preload_body_rule"><br>
Please wait while website preloads...</font></p>
<p>
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
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()
}


document.write('<p><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a> | <a href="http://dynamicdrive.com/">Script Credits</a></small></p>')
// end hiding -->
</script>

</center></body>
</html>

Corrosive
02-01-2010, 06:04 AM
I am creating a modified Javascript preloader to enhance the speed of my HTML site...



Come again? :confused:

edbr
02-01-2010, 06:15 AM
the preloader takes forever, how big are those images?

Corrosive
02-01-2010, 07:34 AM
I guess what we are trying to say is 'why are you masking the problem with a preloader when sorting out your build problems needs to be your priority?' You are currently doing what is known as 'papering over the cracks'.

I reckon you have done nearly all of these; http://corrosiveonline.co.uk/articles_beginner_mistakes.php