Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery div when all images loaded

Tags:

jquery

image

load

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>
like image 387
trogne Avatar asked Dec 15 '12 16:12

trogne


2 Answers

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();
    }
});
like image 110
Dan Avatar answered Nov 14 '22 14:11

Dan


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

like image 22
Niet the Dark Absol Avatar answered Nov 14 '22 12:11

Niet the Dark Absol