jquery div when all images loaded

Question

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>

Answer 1

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

Answer 2

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

Answer 3

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