点击显示内容，但只显示当所有内容已加载

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