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

单击以显示内容，但仅在加载了所有内容时显示

1 个答案: