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