hellojwilde · October 24, 2010 22:23
diff --git a/demo.htm b/demo.htm
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>Stats Page</title>
 </head>
 <body>
 	<div id="chart-container">
 		<!-- This is the original image, which will get replaced. -->
 		<image src="[url]" id="chart" alt="Chart" />
 	</div>

 	<script>
 		// This is actually a really annoying way to get the job done;
 		// it would be best if I were using jQuery, MooTools, or
 		// Prototype to do the DOM manipulation.

 		// Okay, I really should be using addEventListener/attachEvent
 		// here instead of onload, but that's going to get cumbersome
 		// because I don't have jQuery/Moo at my disposal to deal with
 		// the cross-browser issues associated with that technique

 		var container 	= document.getElementById("chart-container");
 		var original  	= document.getElementById("chart");
 		var replacement = document.createElement('img');
 		var placeholder = document.createElement('p');

 		function load () {
 			replacement.src = "[url]";
 			document.body.appendChild(replacement);
 			document.body.appendChild(placeholder);
 		};

 		function replace () {
 			container.removeChild(original);
 			container.appendChild(replacement);
 			document.body.removeChild(placeholder);
 		};

 		replacement.className = "loader";
 		placeholder.className = "placeholder";
 		placeholder.innerText = "Loading...";

 		replacement.onload = replace;
 		original.onload = load;
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Stats Page</title>
	</head>
	<body>
	<div id="chart-container">
	<!-- This is the original image, which will get replaced. -->
	<image src="[url]" id="chart" alt="Chart" />
	</div>

	<script>
	// This is actually a really annoying way to get the job done;
	// it would be best if I were using jQuery, MooTools, or
	// Prototype to do the DOM manipulation.

	// Okay, I really should be using addEventListener/attachEvent
	// here instead of onload, but that's going to get cumbersome
	// because I don't have jQuery/Moo at my disposal to deal with
	// the cross-browser issues associated with that technique

	var container = document.getElementById("chart-container");
	var original = document.getElementById("chart");
	var replacement = document.createElement('img');
	var placeholder = document.createElement('p');

	function load () {
	replacement.src = "[url]";
	document.body.appendChild(replacement);
	document.body.appendChild(placeholder);
	};

	function replace () {
	container.removeChild(original);
	container.appendChild(replacement);
	document.body.removeChild(placeholder);
	};

	replacement.className = "loader";
	placeholder.className = "placeholder";
	placeholder.innerText = "Loading...";

	replacement.onload = replace;
	original.onload = load;
	</script>
	</body>
	</html>