Question

I want to load every image inside a div before actually displaying them. I have something similar to this:

<div>

<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />

</div>

At first I tried doing things like:

$('div img').load(function() {

$('div img').show();


});

Or this:

$('div').find('img').load(function() {

$('div img').show();

});

Unfortunately, this didn’t work because once the browser loads even just a single image, it fires the event. Any ideas on how to load everything first ? Thanks!

Answer 1

You can keep track of how many images have loaded:

var $images = $('div img'),
    preloaded = 0,
    total = $images.length;
$images.load(function() {
    if (++preloaded === total) {
        // Done!
    }
});