I have been trying to display an image in while my page is loading. But as you can see in the screenshot that page is loading before the image. Probably because of sequence.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
<style>
div#loading {
top: 200 px;
margin: auto;
position: absolute;
z-index: 1000;
width: 160px;
height: 24px;
background: url(/images/loadingM.gif) no-repeat;
cursor: wait;
}
</style>
</head>
<body><div id="loading"></div></body>
And at the bottom of the page I have used this script
window.onload = function(){ document.getElementById('loading').style.display='none';}
But my page is not loading before the content. So, in a nut shell I can't see loading image on page load.