Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Preload image file works in Firefox but not IE? 2

Status
Not open for further replies.

jleampark

Technical User
Mar 4, 2005
7
US
I have a page that preloads images to my site (not an advertisement!!!) and then redirects to the index page.

It works like a charm in Firefox/Netscape but not in pesky IE. In IE, it goes through the progress bar up to approximately 95% and holds...

I grabbed the preload code from Dynamic Drive and am hoping that one of you Javascript gurus can debug it:

Code:
<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 [URL unfurl="true"]http://dynamicdrive.com[/URL]
*/

// You may modify the following:
	var locationAfterPreload = "[URL unfurl="true"]http://www.teamspirittees.com/otw/"[/URL] // 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("<images here...>")

// 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()
}
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>
</head>
<body bgcolor="#FFFFFF"> 
<center> 
  <font size="4">Please be patient while some images<br> 
  are being preloaded...</font> 
  <p> 0%
    <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> &nbsp;| &nbsp;<a href="[URL unfurl="true"]http://dynamicdrive.com/">Script[/URL] Credits</a></small></p>')
// end hiding -->
</script> 
</center> 
</body>
</html>

Thanks in advance!!

Joe
 
I can think of a few tweaks that I could try, but like virtually everything from that site, the code is not easy on the eye.
I do have an alternative that just produces a styleable %age display, based on the image sizes you specify.
Upon completion you can navigate to a new document or run some other code.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top