CODEWITHSUNDEEP
jqueryimageload
trogne
trogne

Reputation: 3552

jquery div when all images loaded

I can load an image when it is loaded, by doing:

<img style="display:none;" src="big3.jpg">
<script type="text/javascript">
    $('img').load(function(){
        $(this).css({'display':'block'})
    });
</script>

But what I want is to load the div when all img is loaded, but this is not working, why? :

<div style="display:none;">
    <img src="big3.jpg">
</div>
<script type="text/javascript">
    $('div').load(function(){
        $(this).css({'display':'block'})
    });
</script>

Upvotes: 12

Views: 11357

Answers (3)

Faisal Sarfraz
Faisal Sarfraz

Reputation: 660

I know its too late to answer this question but for anyone viewing this thread, there is a simple and easy to use jQuery plugin with lots of other tricks to do the job. You can check it out here. then for checking all image load, you just need to do this

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })

Upvotes: 0

Dan
Dan

Reputation: 1559

As @Kolink said, divs don't load. This code will show the div when all the images inside the div have loaded. (untested)

var $images = $('div img');
var loaded_images_count = 0;

$images.load(function(){
    loaded_images_count++;

    if (loaded_images_count == $images.length) {
        $("div").show();
    }
});

Upvotes: 25

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

<div> elements don't load, images do. You want to listen for when the image loads, and then get the <div> and show it.

Upvotes: 1

Related Questions