Image Preloader not working in Internet Explorer

**hall** · 07-13-2006, 06:56 PM

1) Script Title: Preload Image (with progress bar) Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...eloadimage.htm

3) Describe problem: The preloader will not load completely in IE and the user is forced to manually click the "Skip Preloading" text link to get to the site. It hangs at 99%. Why? See the site here.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>[SAH] Shad A. Hall Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="Imagetoolbar" content="no" />
<link rel="stylesheet" href="sah-css.css" type="text/css" />

<script type="text/javascript" language="JavaScript1.1">
//<![CDATA[

/*
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 = 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/art-dogwood-4-266x340-j72.jpg","images/art-dogwood-4-s-70x89-j72.jpg","images/art-dogwood-4-tn-30x38-j72.jpg","images/art-dogwood-5-266x340-j72.jpg","images/art-dogwood-5-tn-30x38-j72.jpg","images/art-dogwood-6-266x340-j72.jpg","images/art-dogwood-6-tn-30x38-j72.jpg","images/art-dogwood-7-266x340-j72.jpg","images/art-dogwood-7-tn-30x38-j72.jpg","images/art-dogwood-a-70x70-j72.jpg","images/art-flower-10-266x340-j72.jpg","images/art-flower-10-tn-30x38-j72.jpg","images/art-flower-11-266x340-j72.jpg","images/art-flower-11-tn-30x38-j72.jpg","images/art-flower-12-266x340-j72.jpg","images/art-flower-12-tn-30x38-j72.jpg","images/art-flower-13-266x340-j72.jpg","images/art-flower-13-tn-30x38-j72.jpg","images/art-flower-14-266x200-j72.jpg","images/art-flower-14-tn-50x38-j72.jpg","images/art-flower-15-266x144-j72.jpg","images/art-flower-15-tn-70x38-j72.jpg","images/art-flower-7-266x340-j72.jpg","images/art-flower-7-s-70x89-j72.jpg","images/art-flower-7-tn-30x38-j72.jpg","images/art-flower-8-266x340-j72.jpg","images/art-flower-8-tn-30x38-j72.jpg","images/.jpg","images/art-flower-9-266x340-j72.jpg","images/art-flower-9-tn-30x38-j72.jpg","images/art-flower-a-70x70-j72.jpg","images/art-heart-10-266x340-j72.jpg","images/art-heart-10-s-70x89-j72.jpg","images/art-heart-10-tn-30x38-j72.jpg","images/art-heart-11-266x340-j72.jpg","images/art-heart-11-tn-30x38-j72.jpg","images/art-heart-12-266x340-j72.jpg","images/art-heart-12-tn-30x38-j72.jpg","images/art-heart-13-266x340-j72.jpg","images/art-heart-13-tn-30x38-j72.jpg","images/art-heart-14-266x340-j72.jpg","images/art-heart-14-tn-30x38-j72.jpg","images/art-heart-15-266x340-j72.jpg","images/art-heart-15-tn-30x38-j72.jpg","images/art-heart-16-266x340-j72.jpg","images/art-heart-16-tn-30x38-j72.jpg","images/art-heart-17-266x340-j72.jpg","images/art-heart-17-tn-30x38-j72.jpg","images/art-heart-18-266x340-j72.jpg","images/art-heart-18-tn-30x38-j72.jpg","images/art-heart-19-266x340-j72.jpg","images/art-heart-19-tn-30x38-j72.jpg","images/art-heart-20-266x340-j72.jpg","images/art-heart-20-tn-30x38-j72.jpg","images/art-heart-21-266x340-j72.jpg","images/art-heart-21-tn-30x38-j72.jpg","images/art-heart-22-266x340-j72.jpg","images/art-heart-22-tn-30x38-j72.jpg","images/art-heart-a-70x70-j72.jpg","images/art-peace-10-266x340-j72.jpg","images/art-peace-10-tn-30x38-j72.jpg","images/art-peace-11-266x340-j72.jpg","images/art-peace-11-tn-30x38-j72.jpg","images/art-peace-12-266x340-j72.jpg","images/art-peace-12-tn-30x38-j72.jpg","images/art-peace-4-266x340-j72.jpg","images/art-peace-4-tn-30x38-j72.jpg","images/art-peace-5-266x340-j72.jpg","images/art-peace-5-tn-30x38-j72.jpg","images/art-peace-6-266x340-j72.jpg","images/art-peace-6-tn-30x38-j72.jpg","images/art-peace-7-266x340-j72.jpg","images/art-peace-7-tn-30x38-j72.jpg","images/art-peace-8-266x340-j72.jpg","images/art-peace-8-tn-30x38-j72.jpg","images/art-peace-9-266x340-j72.jpg","images/art-peace-9-tn-30x38-j72.jpg","images/art-peace-a-70x70-j72.jpg","images/art-sunburst-10-266x340-j72.jpg","images/art-sunburst-10-tn-30x38-j72.jpg","images/art-sunburst-3-266x355-j70.jpg","images/art-sunburst-4-266x340-j72.jpg","images/art-sunburst-4-s-70x89-j72.jpg","images/art-sunburst-4-tn-30x38-j72.jpg","images/art-sunburst-5-266x340-j72.jpg","images/art-sunburst-5-tn-30x38-j72.jpg","images/art-sunburst-6-266x340-j72.jpg","images/art-sunburst-6-tn-30x38-j72.jpg","images/art-sunburst-7-266x340-j72.jpg","images/art-sunburst-7-tn-30x38-j72.jpg","images/art-sunburst-8-266x340-j72.jpg","images/art-sunburst-8-tn-30x38-j72.jpg","images/art-sunburst-9-266x340-j72.jpg","images/art-sunburst-9-tn-30x38-j72.jpg","images/art-sunburst-a-70x70-j72.jpg","images/sah-blog-350x56-j72.jpg","images/sah-leftmatte-10x370-g64.jpg","images/sah-links-blogger-100x99-j72.jpg","images/sah-links-hows-350x50-j72.jpg","images/sah-shad-137x204.jpg","images/sah-shad-137x204-j72.jpg","images/sah-studio-192x256-j72.jpg","images/sah-bottommatte-768x10-g64.gif","images/sah-menu-768x17-g.gif","images/sah-menu-768x17-g64.gif","images/sah-rightmatte-133x370-g64.gif","images/sah-titlebar-768x112-g64.gif","images/spacer.gif")

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

<div id="containermaster">

<div id="preloader">
<p>Web site is being loaded.<br />
0%
<script type="text/javascript" language="JavaScript1.1">
//<![CDATA[
// 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="index2.html">Skip Preloading</a></small></p>')
//]]>
</script></p>
</div>
</div><!-- end of container master div //-->
</body>
</html>

Thanks in advance,
Hall

**jscheuer1** · 07-13-2006, 09:45 PM

Most likely, one of your images is missing. This could be due to a misspelling of its name or using even the wrong upper/lower case in its name. IE treats missing images differently than other browsers, considering them 'incomplete'.

**jscheuer1** · 07-13-2006, 09:52 PM

Here it is:

Code:

,"images/.jpg"

Get rid of that from:

Code:

var yourImages = new Array("images/art-d . . .

and it should take care of it.

**hall** · 07-14-2006, 05:16 PM

That was it! Thank you!!

Hall

Thread: Image Preloader not working in Internet Explorer

Thread Tools

Search Thread

Image Preloader not working in Internet Explorer

Bookmarks

Bookmarks

Posting Permissions