Skip to content

Instantly share code, notes, and snippets.

@barneycarroll
Created May 19, 2011 16:55
Show Gist options
  • Save barneycarroll/981217 to your computer and use it in GitHub Desktop.
Save barneycarroll/981217 to your computer and use it in GitHub Desktop.
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>
@barneycarroll
Copy link
Author

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

@ssavery
Copy link

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!

@barneycarroll
Copy link
Author

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.

@FarzadWadia
Copy link

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

Copy link

ghost commented Aug 23, 2018

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

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