Hide the page body until page & dependencies have finished loading

html.loading.snippet.html

<script>
	// add a class of 'loading' to the HTML, then remove it once the page has finished loading
	(function(c){
		c('scripted loading')
		window.onload = function(){setTimeout(function(){
			c(c().replace('loading',''))
		},30)}
	}(function(c){
		var h = document.lastChild
		return c ? h.className = c : h.className
	}))
</script>
<style>
	html.loading body {
		opacity: 0;
		   -moz-transition: opacity 0.3s ease-out;
		     -o-transition: opacity 0.3s ease-out;
		-webkit-transition: opacity 0.3s ease-out;
		    -ms-transition: opacity 0.3s ease-out;
		transition: opacity 0.3s ease-out;
	}
	
	html.loading:after {
		content: 'Loading...';
		display: block;
		line-height: 1em;
		margin-top: -.5em;
		position: absolute;
		text-align: center;
		top: 50%;
		width: 100%;
	}
</style>

Wrapped window.onload setTimeout in an anonymous function to circumvent IE6 'Not implemented' native function assignment bug.

This code is exactly what I have been looking for however I do have one question.
I want to replace the "Loading..." text with and ajax loading gif.
I am terrible with code and have been pathetically doing trial and error attempts for close to an hour now...
Could you please show me how to modify this code so that a .gif file is displayed instead of the load text while the page loads.
Thank you for any help!

ssavery, sorry for not getting back to you sooner. I've already produced versions of this same mechanism using a loading GIF, which works very nicely. You can take and modify the code from this site: http://www.sojuicy.co.uk/ (the code for the loading appearance begins at line 170 of the CSS at http://www.sojuicy.co.uk/-inc/css/styles.css — and you can inspect it in detail by reapplying the class 'loading' to the HTML tag via Firebug or your DOM Inspector). In that example, I didn't apply the loading GIF to the body itself (or an ::after element) because I still wanted to show some other background elements while most of the hefty resources downloaded.

Hope this helps.

replace the "Loading..." text with loading image.

It works for me. But, can some one help me to not hide the body, but prevent click to it?