Introduction:
Here I will explain how to use jQuery to show loading image while page loading in jQuery or show loading image in webpage while page loading instead of blank page in jQuery.
Description:
In previous articles I explained jQuery query string parameter values with spaces, jQuery hide div elements after 5 seconds, jQuery check given date greater than current date jQuery Remove first/last character from string, Scroll back to top plugin Examples, jQuery create rounded corners for textbox and many articles relating to JQuery. Now I will explain how to show loading image while page loading in jQuery.
In previous articles I explained jQuery query string parameter values with spaces, jQuery hide div elements after 5 seconds, jQuery check given date greater than current date jQuery Remove first/last character from string, Scroll back to top plugin Examples, jQuery create rounded corners for textbox and many articles relating to JQuery. Now I will explain how to show loading image while page loading in jQuery.
To show loading image on page load we need to define load function in jQuery during pageload and need to write css class to show loading image for that we need to write code like as shown below
// jQuery Plugin and calling function in page load
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#pageloaddiv").fadeOut(2000);
});
</script>
// CSS Class
<style type="text/css">
#pageloaddiv {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url('pageloader.gif') no-repeat center center;
}
</style>
// loading div to show loading image
<div id="pageloaddiv"></div>
|
If you want check this code in complete example check below code
Example:
<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.8.2.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#pageloaddiv").fadeOut(2000);
});
</script>
<style type="text/css">
#pageloaddiv {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url('pageloader.gif') no-repeat center center;
}
</style>
</head>
<body>
<div id="pageloaddiv"></div>
</body>
</html>
|
Live Demo
 |
No comments:
Post a Comment