OnClick 缩略图 - 加载图像答案

【问题标题】：OnClick thumbnails - load imageOnClick 缩略图 - 加载图像
【发布时间】：2013-04-29 01:49:03
【问题描述】：

我有一个简单的图片库，包含大约 25-30 张带有缩略图条的照片我想要的是只加载我单击缩略图的图像，而不是等到所有 25-30 张照片都加载完毕，因为它会减慢我的网站速度。任何想法如何做到这一点？

【问题讨论】：

在 .click() 事件中加载图片
您是否将缩略图存储为链接到真实尺寸图像的单独缩略图图像？

【解决方案1】：

首先，将所有 25-30 张照片以不会加载的方式放在页面上；最简单的方法是给它们一个display:none 的CSS 样式。然后，将所有缩略图放在页面上，并添加 jQuery 逻辑，例如：$('.thumbnail').on('click', function() {...。然后点击处理函数可以使用 jQuery 的show 来适当地显示完整的图像。

换句话说，类似于：

(HTML)

<img src="someImage.png" class="mainImage" id="image1" style="display:none"/>
<img src="someImage2.png" class="mainImage" id="image2" style="display:none"/>

<img src="someImageThumb.png" class="thumbnail" id="thumb1"/>
<img src="someImageThumb2.png" class="thumbnail" id="thumb2"/>

(JS)

$('.thumbnail').click(function(e) {
    var thumbId = $(e.target).attr('id');
    var index = thumbId.substr(5); // strip the "thumb" from "thumb1" to get "1"
    var imageId = "main" + index;
    $('#' + imageId).show();
});

【讨论】：