Temporary loading image and image selection when clicking thumbnails using javascript

Question

I have used the following code to switch out images when a user clicks on the thumbnail. The only problem is that it sometimes take a little while to load the large picture after the person clicks on the thumbnail. Is there a way to have a temporary loading image either appear over the thumbnail or the main image to show that it is loading the image when they click on the thumbnail? This temporary loading picture would then go away after the picture is loaded. Another option would be to have the thumbnail image lower its opacity when it is the selected picture. I tried for longer than I would like to admit, but couldn't figure it out.

<div class="mainphoto">
    <img id="main-image" src="http://www.website.com/large/1.jpg" />
</div>
<div>
    <table class="additionalphotostable" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" valign="center">
                <img src="http://www.website.com/spacer.gif" class="full" onclick="document.getElementById('main-image').src='http://www.website.com/large/1.jpg';" style="background: url(http://www.website.com/small/1.jpg) 50% 50% no-repeat;width: 48px;height: 48px;" />
             <!--This picture structure is different because the thumbnail is not the same size as the rest. I am using CSS to make it appear to be the same size by placing it as a background image-->
            </td>
            <td align="center" valign="center">
                <img src="http://www.website.com/small/2.jpg" class="full" onClick="document.getElementById('main-image').src='http://www.website.com/large/2.jpg';" />
            </td>
            <td align="center" valign="center">
                <img src="http://www.website.com/small/3.jpg" class="full" onClick="document.getElementById('main-image').src='http://www.website.com/large/3.jpg';" />
            </td>
            <td align="center" valign="center">
                <img src="http://www.website.com/small/4.jpg" class="full" onClick="document.getElementById('main-image').src='http://www.website.com/large/4.jpg';" />
            </td>
            <td align="center" valign="center">
                <img src="http://www.website.com/small/5.jpg" class="full" onClick="document.getElementById('main-image').src='http://www.website.com/large/5.jpg';" />
            </td>
            <td align="center" valign="center">
                <img src="http://www.website.com/small/6.jpg" class="full" onClick="document.getElementById('main-image').src='http://www.website.com/large/6.jpg';" />
            </td>
        </tr>
    </table>
</div>

Answer 1

The first problem I see is you are targeting the same ID for your images.

onClick="document.getElementById('main-image')

Only 1 ID should exist per page.

---

Here is a very simple way to create a "loading" image.

Fiddle here: http://jsfiddle.net/SinisterSystems/x3vc7/4/

HTML:

<img src="http://www.wall75.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg" />

<img id="loader" src="http://0-media-cdn.foolz.us/ffuuka/board/gd/image/1389/31/1389311265704.gif" />

CSS:

img {
    max-width:200px;
    max-height:200px;
}
#loader {
    position:absolute;
    left:50%;
    top:50%;
    display:none;
}

JS:

$(function() {
    $('img').on('click', function() {
        $('#loader').show();
    });
});