jdeathe/javascript-loader-demo.html

## javascript-loader-demo.html
<!DOCTYPE html>
<html>
<head>
	<title>JavaScriptLoader</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" />
	<style type="text/css">
		body.jsLoaded .hidden {display: none;}
	</style>
</head>

<body>
	<script type="text/javascript">document.body.className += ' jsLoaded';</script>
	<h1>JavaScriptLoader</h1>
	<p>JavaScriptLoader can be used to asynchronously load JavaScript files and then run initalisation code after they are loaded via the callback function.</p>
	<p>This example loads in the <a href="http://jquery.com/">JQuery</a> library and the <a href="http://jqueryui.com/">JQuery UI</a> library from the <a href="https://developers.google.com/speed/libraries/devguide">Google CDN</a> and then executes the code to style links as buttons and to animate the hidden paragraph into view.</p>
	<p class="hidden">JavaScript is Loaded!</p>

	<script type="text/javascript">
	<!--
		(function(w) {
			var src = [
					'//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js',
					'//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js'
				];
			function callback () {
				try {
					// Your code to run after the scripts have loaded.
					$("a").button();
					$(".hidden").show('puff', 'slow');
				} catch (e) {}
			}
			function load () {
				var i = 0, l = src.length, j = l;
				do {
					(function(d, t) {
						var s = d.createElement(t), o = d.getElementsByTagName(t), o = o[o.length - 1], r = 0, f = function() {
							var rs = s.readyState; if (!r && !(rs && rs !== 'complete' && rs !== 'loaded')) { --j || callback(); r = !0; };
						};
						s.async = !0; s.type = 'text/javascript'; s.src = src[i]; s.onload = s.onreadystatechange = f;
						o.parentNode.insertBefore(s, o);
					}(document, 'script'));
				} while (++i < l);
			}
			w.attachEvent ? w.attachEvent('onload', load) : w.addEventListener('load', load, !1);
		})(window);
	//-->
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>JavaScriptLoader</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" />
	<style type="text/css">
	body.jsLoaded .hidden {display: none;}
	</style>
	</head>

	<body>
	<script type="text/javascript">document.body.className += ' jsLoaded';</script>
	<h1>JavaScriptLoader</h1>
	<p>JavaScriptLoader can be used to asynchronously load JavaScript files and then run initalisation code after they are loaded via the callback function.</p>
	<p>This example loads in the <a href="http://jquery.com/">JQuery</a> library and the <a href="http://jqueryui.com/">JQuery UI</a> library from the <a href="https://developers.google.com/speed/libraries/devguide">Google CDN</a> and then executes the code to style links as buttons and to animate the hidden paragraph into view.</p>
	<p class="hidden">JavaScript is Loaded!</p>

	<script type="text/javascript">
	<!--
	(function(w) {
	var src = [
	'//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js',
	'//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js'
	];
	function callback () {
	try {
	// Your code to run after the scripts have loaded.
	$("a").button();
	$(".hidden").show('puff', 'slow');
	} catch (e) {}
	}
	function load () {
	var i = 0, l = src.length, j = l;
	do {
	(function(d, t) {
	var s = d.createElement(t), o = d.getElementsByTagName(t), o = o[o.length - 1], r = 0, f = function() {
	var rs = s.readyState; if (!r && !(rs && rs !== 'complete' && rs !== 'loaded')) { --j \|\| callback(); r = !0; };
	};
	s.async = !0; s.type = 'text/javascript'; s.src = src[i]; s.onload = s.onreadystatechange = f;
	o.parentNode.insertBefore(s, o);
	}(document, 'script'));
	} while (++i < l);
	}
	w.attachEvent ? w.attachEvent('onload', load) : w.addEventListener('load', load, !1);
	})(window);
	//-->
	</script>
	</body>
	</html>