display a div after its contents is loaded

Question

I have a div on my website wich contains images, texts and links. It's a carousel.

what I'm trying to do is to display the div after all the contents is loaded. I want to use opacity 0 siwtch to opacity 1, with a fade in effect.

here is my 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>

I tried something like this, but it's not working :

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

is there a way of doing it ? with fade in to display the div. i can't use display none because my carousel need to be displayed to work

thanks a lot for your help

score 2 · Answer 1 · edited May 23 '17 at 12:10

2

set its visibility to hidden in its style attribute in html markup, and then use this:

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


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

$(window).load waits until all images are loaded

or you could refer to THIS guy's post, where he shares a plugin that allows waiting for a specific element's images to load

edited May 23 '17 at 12:10

Community

1
1

answered Apr 21 '14 at 18:44

Banana

7,424
3
22
43

thanks @Banana, I know how to use the window.load function, but is it possible to replace $(window), by $(#slideshow) ? I don't want to wait until the whole window is loaded, but only the #slideshow... i don't know if it's posssible or if there's a way to do it, thanks – mmdwc Apr 21 '14 at 18:56

score 0 · Answer 2 · edited May 23 '17 at 10:34

A couple of options here that give you the fade in while avoiding display:none;:

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

Using opacity:

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

Using visibility:

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

References: jquery fade element does not show elements styled 'visibility: hidden'

display a div after its contents is loaded

2 Answers2