javascript - OnClick 缩略图 - 加载图像

Question

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

Answer 1

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

换句话说，类似：

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