In this chapter i will explain you how you can bring a spinner or any other image when it takes time to load a bigger image.This can be done easily using jquery library .
Demo Here

Before creating the page obtain the spinner image .Right click and save this image
`or
You can download variety of images from http://www.ajaxload.info

Save the image as spinner.gif

Here is the source code .Save it as ImageLoad.html in a folder along with jquery.js,spinner.gif and the image you want to display,say img_2_display.jpg

ImageLoad.html

Code Explanation

In the head section of ImageLoad.html there is css script and the jquery script …
Examine the code below

  <style type="text/css" media="screen">
    <!--
        BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
        H1 { margin-bottom: 2px; }

        DIV#loader {
            border: 1px solid #ccc;
            width: 500px;
            height: 500px;
            overflow: hidden;
        }

        DIV#loader.loading {
            background: url(spinner.gif) no-repeat center center;
        }
    -->
    </style>

The css script sets spinner.gif as the back ground of the div section in the page body named “loading”

So when the page loads the spinner.gif will be visible

Examine the jquery code section below.

 <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
    <!--
    $(function () {
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', 'img_2_display.jpg');
    });

    //-->
    </script>

You can easily guess what it is doing.It loads the image on to the div section and removes the css fomating when the image loads completely.So the background image of div section is removed and new image is displayed inside the div section.Note down the position where img_2_display.jpg is written.

There is nothing much to explain in the html body section.It contains a div section named “loading” on which spinner image and the final image gets displayed