0

I found this, written by Mr. Polywhirl (Javascript Loading Screen while page loads) and wasn't able to comment because I don't have 50 reputation.

I was just wondering if this can adapted to use on index.php so I can show a loading screen then display index.php once it is fully loaded. Thanks!

function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
    if (document.getElementsByTagName('body')[0] !== undefined) {
        window.clearInterval(intervalID);
        callback.call(this);
    }
}
} 

function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}

onReady(function () {
show('page', true);
show('loading', false);
});

CSS

#page {
display: none;
}
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("https://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
Community
  • 1
  • 1
zoldos
  • 45
  • 1
  • 12
  • essentially, to make it work, `index.php` *is* the loading screen, and then it loads whatever else you wanted in the background via AJAX, and displays it on success. I'd only recommend it if there is a hefty loading process. – serakfalcon Aug 12 '14 at 08:40
  • 1
    Thanks for the reply! I actually figured out my problem. Turns out I had too many widgets on my home page. I thinned it out and got the page to load at least 75% faster. :) – zoldos Aug 12 '14 at 20:27

0 Answers0