Loading image before page load

Simplest document ready code. Tested in IE9, Firefox, Chrome.

by abhijeet abanave

HTML

<body>
    <div id="load"></div>
    <div id="contents">
         Content Here
    </div>
</body>

CSS

#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("https://cdn.dribbble.com/users/4613/screenshots/911982/jar-loading.gif") no-repeat center center rgba(0,0,0,0.25)
}

JavaScript

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);
  }
}