show loading icon until the page is load?

Question

I wanted to show a loading icon to users until the page elements are fully loaded. How can I do that with javascript and I want to do it with javascript, not jquery? Here is a link how google does it How can I do this? triggering some function on onload event or something like this .. I know it will be done somewhat like this or any other ways to do it? Or there is some event for it? UPDATE I did something using display property I hide the body element but and onload of body tag I change its property but where to put the loading icon and add more interactivity. JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

HTML

jlkjjlkjlkjlkjlklk

JS document.onreadystatechange = function () { var state = document.readyState if (state == 'interactive') { document.getElementById('contents').style.visibility="hidden"; } else if (state == 'complete') { setTimeout(function(){ document.getElementById('interactive'); document.getElementById('load').style.visibility="hidden"; document.getElementById('contents').style.visibility="visible"; },1000); } } CSS #load{ width:100%; height:100%; position:fixed; z-index:9999; background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25) } Note: you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page. DEMO http://jsfiddle.net/6AcAr/ - with timeout(only for demo) http://jsfiddle.net/47PkH/ - no timeout(use this for actual page) update http://jsfiddle.net/d9ngT/