OnClick thumbnails - 加載圖像

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