使用javascript单击缩略图时临时加载图像和图像选择

Question

我使用以下代码在用户单击缩略图时切换出图像。 唯一的问题是，在该人单击缩略图后，有时需要一些时间才能加载大图片。 是否有一种方法可以使临时加载图像显示在缩略图或主图像上，以显示它们在单击缩略图时正在加载图像？ 临时加载的图片将在图片加载后消失。 另一种选择是使缩略图图像成为所选图片时降低其不透明度。 我尝试的时间比我想承认的要长，但无法弄清楚。

<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

我看到的第一个问题是您正在为图像指定same ID 。

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

每页只能有1个ID 。

---

这是创建“加载”图像的非常简单的方法。

在这里提琴： 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();
    });
});