mootools

References to Documentation

1. Core/Core.js#$time
2. Element/Element-Event.js#Element.addEvent
3. Window/Window-DomReady.js#domready
4. Native/Element.js#Element.setHTML

var startTime = $time();
 
/* DomReady Event fires when all Elements are ready, but not images. */
window.addEvent('domready', function() {
	var total = $time() - startTime;
	$('log_res').setHTML('<p class=result><strong>DomReady</strong> is now ready and you can access all HTML Elements but not images. <br /> Loading process took <strong>' + total + '</strong>ms.</p>');
 
	// Refresh without cache link
	$('refresh').addEvent('click', function(e) {
		new Event(e).stop();
		window.location.reload(true);
	});	
});
 
/* Load Event fires when the whole page is loaded, included all images */
window.addEvent('load', function() {
	var total = $time() - startTime;
	$('log_res').innerHTML += '<p class="result"><strong>Load</strong> has now finished loading the whole page, including all images. <br /> Loading process took <strong>' + total + '</strong>ms.</p>';
});

<h3>DomReady vs. Load</h3>
<p><a id="refresh" href="#">Refresh the page</a> (will clear the cache)</p>
<div class="left">
	<img src="demos/DomReadyVS.Load/moo.png" width="256" alt="Testing Image" title="Testing Image" />
</div>
<div id="log" class="left">
	<h3>Log Results</h3>
	<div id="log_res"><!-- spacer --></div>
</div>

.result {
	border-bottom: 1px solid #EEEEEE;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
 
.left {
	float: left;
	margin-top: 10px;
}
 
#log {
	padding: 0.5em;
	margin-left: 10px;
	width: 290px;
	background: #fcfcfc;
	border: 1px solid #d6d6d6;
	border-left-color: #e4e4e4;
	border-top-color: #e4e4e4;
}
 
#log_res {
	overflow: auto;
}