Hey Guys

I have the following HTML page which calls a fed and a preload script, Bascially what it does is preload the html page and then fade the whole page in.

However It doesn't work in safari and I can't figure out why?

The HTML is as follows

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Fade Body on Preload Example</title>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="false" />
	<meta name="MSSmartTagsPreventParsing" content="true" />

	<link type="text/css" rel="stylesheet" href="css/examples.css" />

	<script type="text/javascript" src="script/dr.FadePage.js"></script>
	<script type="text/javascript" src="script/dr.Preloader.js"></script>
	<script type="text/javascript">
	// <![CDATA[

		var list = [
			"image/one.jpg",
			"image/two.jpg",
			"image/three.jpg",
			"image/four.jpg",
			"image/five.jpg"
		]

		while (list.length) {
			dr.Preloader.addImage(list.shift());
		}
		
		function allImagesLoaded() {
			// the images have loaded so fade in the body
			dr.FadePage.fadeIn();
			// if you want to know when the page has faded in then use
			// the onFadeComplete event handler
			dr.FadePage.onFadeComplete = function() {
				alert("the page has faded in");
			}
		}

		function onBodyLoad() {
			// for this example I will delay the preloader for a second
			// but this isn't really needed. I'm just doing it so that the
			// body doesn't fade in as soon as the page is opened in the
			// browser during testing.
			window.interval = setInterval(startPreload, 0);
		}

		function startPreload() {
			clearInterval(window.interval);
			dr.Preloader.onLoadComplete = allImagesLoaded;
			dr.Preloader.start();
		}

	// ]]>
	</script>

</head><body onload="onBodyLoad()" class="transparent">

	<p>Some page content that should fade in when the preload images have all loaded.</p>

</body></html>
The fader script is as follows

Code:
//------------------------------------------------------------------------------
//
// Image Crossfade
//
//------------------------------------------------------------------------------

var dr;
if (!dr) dr = {};

dr.FadePage = {};
dr.FadePage.interval = 0;
dr.FadePage.fadeStep = 0.05;

dr.FadePage.onFadeComplete = function() {
}

dr.FadePage.fadeIn = function() {
	if (this.interval) {
		clearInterval(this.interval);
	}
	this.setOpacity(0);
	this.fadeDelta = this.fadeStep;
	this.interval = setInterval(this.updateFade, 15);
}

dr.FadePage.fadeOut = function() {
	if (this.interval) {
		clearInterval(this.interval);
	}
	this.setOpacity(1);
	this.fadeDelta = -this.fadeStep;
	this.interval = setInterval(this.updateFade, 15);
}

dr.FadePage.updateFade = function() {
	var o = dr.FadePage;
	var v = o.getOpacity();
	var complete = false;
	v += o.fadeDelta;
	if (o.fadeDelta > 0 && v >= 1) {
		complete = true;
		v = 1;
	}
	else if(o.fadeDelta < 0 && v <= 0) {
		complete = true;
		v = 0;
	}
	o.setOpacity(v);
	if (complete) {
		o.onFadeComplete();
		clearInterval(o.interval);
		o.interval = 0;
	}
}

dr.FadePage.setOpacity = function( arg ) {
	var o = this.getBody();
	if (this.isIE()) {
		o.filters[0].opacity = String(arg * 100);
	}
	else {
		o.style.opacity = String(arg);
	}
}

dr.FadePage.getOpacity = function() {
	var o = this.getBody();
	if (this.isIE()) {
		return Number(o.filters[0].opacity) / 100;
	}
	else {
		return Number(o.style.opacity);
	}
}

dr.FadePage.isIE = function() {
	var ua = navigator.userAgent;
	return ua.indexOf("Opera") == -1 && ua.indexOf("MSIE") > -1;
}

dr.FadePage.getBody = function() {
	return document.getElementsByTagName("body")[0];
}
And the preload script is as follows.

Code:
//------------------------------------------------------------------------------
//
// Image Preloader
//
//------------------------------------------------------------------------------

var dr;
if (!dr) dr = {};

dr.Preloader = function() {
	this.preloadList = [];
	this.loadList = [];
	this.isLoading = false;
}

// Invoked when an image has loaded.
dr.Preloader.prototype.onLoad = function( url ) {
}

// Invoked when all images have loaded.
dr.Preloader.prototype.onLoadComplete = function() {
}

// Adds an image to the preload list.
// Images can not be added after the preloader has started.
dr.Preloader.prototype.addImage = function( url ) {
	if (this.isLoading || this.imageExists(url)) {
		return;
	}
	this.preloadList.push(url);
}

// Starts the preloader.
// This should be called with the <body> onload attribute or the
// window.onload event handler.
dr.Preloader.prototype.start = function() {
	if (this.isLoading) {
		return;
	}
	this.isLoading = true;
	document.__preloader = [];
	var i = this.getTotal();
	while (i--) {
		var url = this.preloadList[i];
		var img = this.createImage(url);
		img.onload = this.onLoadHandler;
		this.loadList.push(url);
	}
}

// Checks if an image has been added to the preload list.
dr.Preloader.prototype.imageExists = function( url ) {
	var i = this.getTotal();
	while (i--) {
		if (this.preloadList[i] == url) {
			return true;
		}
	}
	return false;
}

// Returns the number of images added to the preload list.
dr.Preloader.prototype.getTotal = function() {
	return this.preloadList.length;
}

// Returns the number of images that have loaded.
dr.Preloader.prototype.getLoaded = function() {
	return this.loadList.length;
}

// Returns the number of images that still need to load.
dr.Preloader.prototype.getRemaining = function() {
	return this.getTotal() - (this.getTotal() - this.getLoaded());
}

dr.Preloader.prototype.createImage = function( url ) {
	var img = new Image();
	document.__preloader.push(img);
	img.src = url;
	return img;
}

dr.Preloader.prototype.onLoadHandler = function() {
	var o = dr.Preloader;
	var i = o.loadList.length;
	while (i--) {
		if (this.src.indexOf(o.loadList[i])) {
			break;
		}
	}
	var url = o.loadList[i];
	o.loadList.splice(i, 1);
	o.onLoad(url);
	if (o.loadList.length == 0) {
		o.onLoadComplete();
		o.preloadList = [];
		oloadList = [];
		oisLoading = false;
	}
}

//------------------------------------------------------------------------------

dr.Preloader = new dr.Preloader();
If anyone can see why this isn't working with Safari I would really appreciate some help.

Thanks in advance

Streamer