Question

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

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

OnClick缩略图 - 加载图像

1 个答案: