Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Hide the page body until page & dependencies have finished loading
<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>
Owner

barneycarroll commented May 24, 2011

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

ssavery commented Oct 22, 2011

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!

Owner

barneycarroll commented Nov 7, 2011

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment