我有一个简单的图片库,包含大约 25-30 张带有缩略图条的照片我想要的是只加载我单击缩略图的图像,而不是等到所有 25-30 张照片都加载完毕,因为它会减慢我的网站速度。任何想法如何做到这一点?
问问题
3104 次
1 回答
0
首先,将所有 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();
});
于 2013-05-04T22:44:21.277 回答