使用低分辨率缩略图单击/查看完整或大图像答案

【问题标题】：Use low-res thumbnails to click/view full or large image使用低分辨率缩略图单击/查看完整或大图像
【发布时间】：2015-07-02 00:28:08
【问题描述】：

我发现（在这里，我认为）一个不错的紧凑 javascript 函数，它非常好地允许用户单击小图片来查看同一图像的完整/更大版本。问题是小图像实际上只是同一图像文件的 css 样式（例如高度限制为 100 像素）副本......这意味着如果我在一组中有很多潜在图像，则需要很长时间加载这些“缩略图”（因为它们不是非常小的文件大小的缩略图）。

这是我正在使用的代码的 sn-p：

var lastImg = 1; //Set initial thumbnail and preview
document.getElementById(-1).src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb";

function preview(img) {
    document.getElementById(lastImg).className = "thumb";
    img.className = "thumb";
    document.getElementById(-1).src = img.src;
    lastImg = img.id
}

.preview {width: 100%;}
.thumb {margin:2px; height:100px; float:left;}

<img id="0" class="thumb" src="photos/1406960_00.jpg" alt="thumb0" onclick="preview(this);" />
<img id="1" class="thumb" src="photos/1406960_01.jpg" alt="thumb1" onclick="preview(this);" />
<img id="2" class="thumb" src="photos/1406960_02.jpg" alt="thumb2" onclick="preview(this);" />
<img id="3" class="thumb" src="photos/1406960_03.jpg" alt="thumb3" onclick="preview(this);" />
<div style="clear:both;"></div>
<img  id="-1" src="photos/1406960_00.jpg" class="preview" alt="default first image" />

我希望类 thumb images 中的 src 实际使用我可以保存在 thumbs/ 目录中的较低分辨率文件，然后让 onclick 事件将存在于 photos/ 中的较大尺寸图像显示到类预览图像中.

【问题讨论】：

标签： javascript onclick thumbnails

【解决方案1】：

我想我已经找到了解决办法：

<img id="0" class="thumb" src="thumbs/1406960_00.jpg" name="photos/1406960_00.jpg" alt="thumb" onclick="preview(this);" />

如果我将标签“名称”添加到每个缩略图图像的代码中，并将该值作为较大文件的目录/名称，则该值将显示在目标（预览）窗口中 onclick: 而不是脚本使用 img.src，使用 img.name。 (document.getElementById(-1).src = img.name;)

<script type="text/javascript">
    var lastImg = 1; //Set initial thumbnail and preview
    document.getElementById(-1).src = document.getElementById(lastImg).src;
    document.getElementById(lastImg).className = "thumb";

    function preview(img) {
        document.getElementById(lastImg).className = "thumb";
        img.className = "thumb";
        document.getElementById(-1).src = img.name; //<-this seems to work
        lastImg = img.id
    }
</script>

【讨论】：