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>

Why are you using `.css()`? `.show()` works just fine. – bobthyasian Dec 15 '12 at 16:21 — bobthyasian, Dec 15 '12 at 16:21

Dan · Accepted Answer · 2012-12-15T16:28:03.983

25

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

edited Dec 15 '12 at 16:28

answered Dec 15 '12 at 16:22

Dan

1,559
1
15
18

3

For those using more recent versions of jQuery, be sure to change this to `$images.on('load', function(){` – probrandono Dec 22 '18 at 00:38

score 1 · Answer 2 · answered Dec 15 '12 at 16:20

1

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

answered Dec 15 '12 at 16:20

Niet the Dark Absol

320,036
81
464
592

score 0 · Answer 3 · answered Apr 12 '17 at 10:29

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

jquery div when all images loaded

3 Answers3

Linked