1. Create a Loading image. You can create using ajaxLoad.info, and name it as loadingImage.gif
2. Create an area for Image. I prefer div tag as shown below
<div id="showloader" class="showloading" style="background: transparent url(spinner.gif) no-repeat center center;width: 500px;height: 500px;overflow: hidden;"></div>
3. Define a Javascript function as follow:
function putLoading(imageLink)
{
var img = new Image();
$(img).load(function ()
{
$(this).css('display', 'none');
$(this).hide();
$('#showloader').removeClass('showloading').append(this);
$(this).fadeIn();
}).error(function ()
{
// some error message
}).attr('src', imageLink);
}
4. Now just call the function putLoading(imageLocation);
5. Thats it..
======== Full Source Code:
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function putLoading(imageLink)
{
var img = new Image();
$(img).load(function ()
{ $(this).css('display', 'none');
$(this).hide();
$('#showloader').removeClass('showloading').append(this);
$(this).fadeIn();
}).error(function ()
{
// some error message
}).attr('src', imageLink);
}
</script>
</head>
<body>
<div id="showloader" class="showloading" style="background: transparent url(spinner.gif) no-repeat center center;width: 500px;height: 500px;overflow: hidden;"></div>
<script type="text/javascript">
putLoading('http://farm1.static.flickr.com/4024/4337935057_6c8e4aa993.jpg');
</script>
</body>
========
Example Link: Click here
No comments:
Post a Comment