Hi,

I've had a look at a few preloading scripts and have made my own... to fit my needs.

I've ran it several times in the last day to iron out silly bugs and finally I've got it to a state where it's textual output reflects what I think it should (and looks nice) and it doesn't throw up errors (when running in IE6).

However, when it redirects to the main page of my site, the images I've just preloaded seem to reload. Moreover, the actual preloading process seems incredibly fast (I'm on 56k dial-up here) considering the time it takes to load the images inside the site. I'm wondering whether my script actually does preload the images and whether the images are subsequently loaded from disk or from the server.

As mentioned, I am running IE6 and this is the only environment under which it has been tested.

The splash page, preloading scripts and main page are uploaded and to investigate, the URL is http://skinme.cjb.net/curvy/ This URL loads a frameset to get rid of the scrollbars. The page you will see, splash.htm, has an IFRAME linking to preload.htm, where the actual preloading process happens. The code is in http://skinme.cjb.net/curvy/scripts/preload.js

I cannot see why it is not working, as the actual preloading process (not the text formatting and div-updating) is very similar to a script I have seen on Website Abstraction (the simple preloader). Could it be because the images it preloads are accessed by CSSs and used as table cell backgrounds? Surely not.

Another theory I have is this. The HTML page where the JS is used is in the base directory. The JS is stored in a directory scripts and the images under subdirectories of a directory images:
Code:
[curvy]
           preload.htm
           [scripts]
                         preload.js
                         *.css
           [images]
                         end.png
                         trans.gif
                         [newsitem]
                                            *.png
                         [tablebgs]
                                            *.png
Am I linking to the images correctly? I assume so, because the textual output suggests so.

Anyway, here is the relevant code:

preload.js
Code:
done = new Array
doneCount = 0

function preload() {
	for (i=0;i<preload.arguments.length;i++) {
		img = new Image()
		img.src = preload.arguments[i]
		doneCount++
		imgstring = preload.arguments[i].toString()
		imgnamestartpos = imgstring.lastIndexOf("/") + 1
		imgnameFriendly = imgstring.substring(imgnamestartpos)
		imglistOld = imglist.innerHTML
			if (doneCount < 10) {
					imglist.innerHTML = imglistOld + "<BR>image &nbsp;" + doneCount + " loaded: " + imgnameFriendly
			}
			else {
					imglist.innerHTML = imglistOld + "<BR>image " + doneCount + " loaded: " + imgnameFriendly
			}
		exactPercentDone = (doneCount / preload.arguments.length) * 100
		percentDone = Math.round(exactPercentDone)
		self.location = "#bottom"
		progress.innerHTML = doneCount + " of " + preload.arguments.length + " images loaded [" + percentDone + "% complete]"
	}
progress.innerHTML = "Preloading was successful. You may now enter the site. You will be redirected in 5 seconds time. Sit back and enjoy the ride down the &#34;information super highway&#34; - your driver will be turning off at exit 17."
self.location = "#bottom"
setTimeout("top.location='news/index.htm',5000")
}

preload("../images/end.png",
"../images/trans.gif",
"../images/newsitem/a1.png",
"../images/newsitem/a2.png",
"../images/newsitem/b1.png",
"../images/newsitem/b3.png",
"../images/newsitem/c1.png",
"../images/newsitem/c2.png",
"../images/tablebgs/a2.png",
"../images/tablebgs/a3.png",
"../images/tablebgs/a4.png",
"../images/tablebgs/a5.png",
"../images/tablebgs/a6.png",
"../images/tablebgs/a7.png",
"../images/tablebgs/a8.png",
"../images/tablebgs/b4.png",
"../images/tablebgs/b5.png",
"../images/tablebgs/b6.png",
"../images/tablebgs/b7.png",
"../images/tablebgs/b8.png",
"../images/tablebgs/c2.png",
"../images/tablebgs/c3.png",
"../images/tablebgs/c5.png",
"../images/tablebgs/c6.png",
"../images/tablebgs/c7.png",
"../images/tablebgs/c8.png",
"../images/tablebgs/d2.png",
"../images/tablebgs/d3.png",
"../images/tablebgs/d4.png",
"../images/tablebgs/d5.png",
"../images/tablebgs/d6.png",
"../images/tablebgs/d7.png",
"../images/tablebgs/d8.png",
"../images/tablebgs/e3.png",
"../images/tablebgs/e4.png",
"../images/tablebgs/e5.png",
"../images/tablebgs/e6.png",
"../images/tablebgs/e7.png",
"../images/tablebgs/e8.png",
"../images/tablebgs/f3.png",
"../images/tablebgs/f4.png",
"../images/tablebgs/f5.png",
"../images/tablebgs/f6.png",
"../images/tablebgs/f7.png",
"../images/tablebgs/f8.png")
preload.htm
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="scripts/preload.css" title="Preloader Stylesheet">
<title>skinme! [ preloadin' ]</title>
</head>
<body text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table name="preloadtable" id="preloadtable" cellpadding="0" cellspacing="0">
	<tr>
		<td valign="top">
			preloading images:
			<div id="imglist"></div>
			<br>&nbsp;
			<div id="progress">&nbsp;0 of &nbsp;0 images loaded [0% complete]</div>
			<a name="bottom"><div id="bottomdiv">skinme!&nbsp;
																			<br>&nbsp;</div></a>
		</td>
	</tr>
</table>
<script type="text/javascript" language="JavaScript" src="scripts/preload.js"></script>
</body>
</html>
I'm sorry that the code stretches the screen, but I feel it's best to keep it nice and neat as I coded it, otherwise it could be more confusing. Also, several non-breaking space character codes have been converted to spaces in the post. My non-breaking spaces are correct, as you will see if you download the source from the above link.

Thanks in advance for any help... it will be much appreciated.