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

【问题标题】：Temporary loading image and image selection when clicking thumbnails using javascript使用javascript单击缩略图时的临时加载图像和图像选择
【发布时间】：2014-01-18 12:22:42
【问题描述】：

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

<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>

【问题讨论】：

绝对需要JS。为什么不在on.click 的JS 函数shows 的基础上显示动画gif $('.additionalphotostable').on('click',function() { 和.hides 在this 图像加载后呢？
只需使用您的负载条设置id 和predefined 值。
@NicholasHazel 这就是我想要做的，但我永远无法弄清楚让它完成所有这些操作的代码：更改图片、显示临时图片和显示活动缩略图。我希望有人可以帮助我将所有这些结合起来。
嗯，让我摆弄一下。
我会解决这个问题，因为这是一个非常简单的问题。女孩刚过来。明天必须重新讨论。

标签： javascript html css image

【解决方案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();
    });
});

【讨论】：