How to add a loader image to center of each pages ?
So to make your web application's experience cool ,today we will learn cool stuff to add a loading
image to center of your application.
Actually in today's world it is necessary to provide a better user experience to end user to impress them and obviously it will added a cool and beautiful animated experience to your web application.
Normally programmer uses loading image for those web pages that are quite heavy in size.(Include more resources like images and more contents).
Key points to implement:
- Make a div and add a loading animated image inside that div.
- Make this div visible until entire gets loaded. ( use jquery's window.load method that insures that you requested page resources are fully available on client browser).
- So under window.load method first write code to hide/fadeout that div.
Let's implement is practically.
Make a div on your web page and make a div elememt on center of the page using below CSS.
#loadingDiv{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url('loader.gif') no-repeat center center;
}
<div id="loadingDiv"></div>
Now when user put a request to for page, div element with gets appears on the center of screen.
$(window).load(function() {
$("#pageloaddiv").fadeOut(1000);
});
$(window).load insures that all the resources are fully loaded and hence there is no need to show loading image.
Here is the fully implemented code snippet:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Loading Image while Page loading</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#loadingDiv").fadeOut(1000);
});
</script>
<style type="text/css">
#loadingDiv{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url('loader.gif') no-repeat center center;
}
</style>
</head>
<body>
<div id="pageloaddiv"></div>
</body>
</html>
Hope you like this post.Please provide your feedback.
Thanks.
How to add a loader image to center of each pages ?
Reviewed by CodiBucket
on
09:49
Rating:
Reviewed by CodiBucket
on
09:49
Rating:
No comments: