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!

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!

• javascript
• jquery
• css
• html

• 1 If you set the dimensions like this: <img width="100" height="100" src="1.jpg" /> problem solved. In php you can grab the dimensions with php/manual/en/function.getimagesize.php – Alqin Commented Jan 29, 2013 at 21:09

5 Answers 5

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

Unfortunately there is not easy way to do this in a cross browser patible way. But luckily there are 2 plugins out there that can make it painless.

Check out waitforimages and imagesloaded

Then you can do:

$('div').waitForImages(function(){
  $(this).find('img').show();
});

Try this http://chipsandtv./articles/jquery-image-preload

First, The modern browser can execute concurrently 6 request => Don't load so many image at the load time. If you have many images, you can set the images at the back 'src=""' or non set "src" attributes, And set after the first images loaded

Second, You can check "image was loaded" by using

 document.getElementById('#imageId').plete == !0

You can check with image with the largest size or the last image in DOM to make sure the others images were loaded.

Hope it 'll help you.

This worked for me:

$(document).ready(function () {
    $('#div with images').hide();
});

$(window).load(function () {
    $('#div with images').show();
});