jquery - 加载内容后显示 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 标记的 style 属性中将其 visibility 设置为 hidden，然后使用:

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


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

$(window).load 等待所有图像加载完毕

或者您可以引用THIS家伙的帖子，他在其中分享了一个插件，允许等待特定元素的图像加载