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>

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?