Wednesday, 8 April 2015

Display Loading Image While Page Loads

Display Loading Image While Page Loads

<html>
<body>
<div class="image_loader"></div>
<table>
<tr><td>Name :</td><td>Sharanu</td></tr>
<tr><td>Profile</td><td>Website Developer</td></tr>
</table>
</body>
</html>

<style>
.image_loader {
      width: 100%;
        height: 100%;
        z-index: 5;
        position: absolute;
background: url('images/loading.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>

//create image folder for storing the image to display as per the in css path and also you can download image from this url http://sierrafire.cr.usgs.gov/images/loading.gif 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".image_loader").fadeOut("slow");
})
</script>

No comments:

Post a Comment