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>

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

回答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.

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

来源：https://stackoverflow.com/questions/13893908/jquery-div-when-all-images-loaded