hellojwilde/demo.htm

## 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>