在加载div内容后显示该div

Question

我在我的网站上有一个包含图片、文本和链接的div。这是一个旋转木马。

我要做的是在加载完所有内容后显示div。我想用不透明度0到不透明度1，淡入淡出效果。

下面是我的html：

<div id="slideshow">

    <div id="carousel">

        <li><a href="en/article-1/"><img width="657" height="394" src="wp-content/uploads/41.jpg" class="image_slideshow wp-post-image" alt="4" nopin="nopin" /></a><div class="legende">&nbsp;</div></li>

        <li><a href="en/article-3/"><img width="657" height="394" src="wp-content/uploads/21.jpg" class="image_slideshow wp-post-image" alt="2" nopin="nopin" /></a><div class="legende">&nbsp;</div></li>

        <li><a href="en/article-4/"><img width="657" height="394" src="wp-content/uploads/11.jpg" class="image_slideshow wp-post-image" alt="1" nopin="nopin" /></a><div class="legende">&nbsp;</div></li>

        <li><a href="en/article-5/"><img width="795" height="476" src="wp-content/uploads/6.jpg" class="image_slideshow wp-post-image" alt="6" nopin="nopin" /></a><div class="legende">&nbsp;</div></li>

    </div>

    <ul id="carousel-descriptions">

        <li class="desc">This is article 1</li>

        <li class="desc">This is article 3</li>

        <li class="desc">this is article 4</li>

        <li class="desc">this is article 5</li>

    </ul>

    <div id="carousel-controls">


        <span class="control"></span>


        <span class="control"></span>


        <span class="control"></span>


        <span class="control"></span>


    </div>

    <div class="prev_slide">

        <img src="../../../wp-content/uploads/structure/prev.jpg">

    </div>

    <div class="next_slide">

        <img src="../../../wp-content/uploads/structure/next.jpg">

    </div>

</div>

我试过这样的方法，但它不起作用：

$(document).ready(function () {
    $('#slideshow').css('opacity','0');
        $('#slideshow').load(function() {
  $(this).css('opacity','1');  
    }); 
}

有办法做到这一点吗？使用淡入来显示div。我不能使用display none，因为我的轮播需要显示才能工作

非常感谢你的帮助

Answer 1

在html标记的visibility属性中将其样式设置为hidden，然后使用以下代码：

<div id="slideshow" style="visibility:hidden;">


$(window).load(function () {
  $('#slideshow').css('visibility','visible');
}

$(window).load等待，直到加载完所有图像

或者你可以参考THIS guy的帖子，他分享了一个插件，允许等待特定元素的图像加载

Answer 2

这里有几个选项可以让你在避免display:none;的同时淡入

<div id="slideshow">...</div>

使用不透明度：

$(document).ready(function () {
    $('#slideshow').css('opacity',0).animate({opacity:1}, 1000);
});

使用可见性：

$(document).ready(function () {    
    $('#slideshow').css('visibility','visible').hide().fadeIn('slow');
});

参考资料：jquery fade element does not show elements styled 'visibility: hidden'