There is a excellent jQuery script which creates visual image loading effect, while the image actually loads. When the page is initialized, an animated preloader will take it’s place creating the “image loading” effect. Once the image is ready to be displayed, a script will kick in and image loads with a fade effect.
Step 1. Create a visual image loader image. I prefer www.ajaxLoad.info, once created name it as ‘loader.gif’
Step 2. Create a Div area for the image
<div id="showloader" style="background: transparent url(loader.gif) no-repeat center center; width: 500px; height: 500px; overflow: hidden;"> </div>
Step 3. Create an image loading kick-in function.
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); }
Step 4: Now just call the function putLoading() with Image path.
Full Code:
<div id="showloader" style="background: transparent url(loader.gif) no-repeat center center; width: 500px; height: 500px; overflow: hidden;"> </div> <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> <script type="text/javascript"> putLoading('http://farm1.static.flickr.com/3167/5796343598_3e94a146cc.jpg'); </script>
Demo: http://worldofmagicians.com/photogallery/photogallery.php?user=MagicianPhilip