This is the simplest and fastest JavaScript loader, also it doesn’t affects your another existing jQuery or JS scripts on the page.
Requirements: Little knowledge in JavaScript and some HTML. JavaScript enabled browser.
Applications: Useful for all those pages that load slow, and in sections, so instead of watching the page load in sections.
DEMO : Click here
Click here to download the animated loading gif image
Step 1:
Inside the HEAD tag
<script type="text/javascript">
function hideLoadingLayer(){
document.getElementById("loading_layer").style.visibility="hidden";
}
</script>
Step 2:
Now edit the BODY tag:
<body onload="hideLoadingLayer();">
Step 3:
Now add this DIV above everything :
<div id="loading_layer"><img src="images/loading.gif" alt="" width="550" height="400" border="0" /></div>
Step 4:
Add a Style in your css:
#loading_layer{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:999999;
background-color: #FFF;
text-align: center;
margin: 0 auto;
}
And you have a pleasant loading message. You may edit the content (div styles, etc.) but the JavaScript must remain as is, unless you know what you are doing. This is really a simple script, but it is there for those that want it.
- Ajinkya