點擊顯示內容，但只顯示當所有內容已加載

Question

我有以下div容器，加載頁面時隱藏，我想執行一些事情，但我不知道如何。

1）在加載時，應該隱藏.slideshow容器並且不應加載圖像。 2）當用戶點擊一個按鈕幻燈片的圖像應該加載和只顯示，但只有當他們全部加載。

<div class="slideshow" style="display:none"> 
    <img src="image1.png"/> 
    <img src="image2.png"/> 
    <img src="image3.png"/> 
    <img src="image4.png"/> 
    <img src="image5.png"/> 
</div> 

Answer 1

var images = $('div.slideshow img'), //caching selectors 
    loaded = 0, //set initial load count = 0 
    total_len = $images.length; //total images 
images.load(function() { 
    if (++loaded === total_len) { //match count of loaded to total images 
     // All images are loaded code here 
    } 
}); 

---

OP的評論

後更新的改變你的HTML

<div class="slideshow" style="display:none"> 
    <img src="#" data-src="image1.png"/> 
    <img src="#" data-src="image2.png"/> 
    <img src="#" data-src="image3.png"/> 
    <img src="#" data-src="image4.png"/> 
    <img src="#" data-src="image5.png"/> 
</div> 

jQuery的

var div_slideshow = $('div.slideshow') 
$('#btnID').click(function() { 
    div_slideshow.show(); 
    div_slideshow.find('img').prop('src', function() { 
     return $(this).data('src'); 
    }); 
});