Display a loading gif image before a page loads using javascript and Css

September 10, 2011

Display a loading gif image before a page loads using javascript and Css

Have you ever need to showing a loading image before bage loading?Like this demo.

to do that at first we well need a CSS like below

div#content {
    display: none;
    }

div#loading {             
    top: 200 px;
    margin: auto;
    position: absolute;
    z-index: 1000;
    width: 160px;
    height: 24px;
    background: url(loadingimage.gif) no-repeat;
    cursor: wait;                
    }

Then we will add id of div into it

<body>
<div id="loading"></div>
<div id="content">
your content here...
</div>
</body>

Then add the following javascript code into head section of your html page.

<head>
<script type="text/javascript">
        function preloader(){
            document.getElementById("loading").style.display = "none";
            document.getElementById("content").style.display = "block";
        }//preloader
        window.onload = preloader;
</script>
</head>

You can check demo.

Category: java script |

Display a loading gif image before a page loads using javascript and Css