使用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();
    });
});