JS/CSS: Preload images from the HTML file while they are hidden

Question

Let's assume I have several img tags in my html document, all of them are supposed to be shown in a slideshow that shows one image at a time.

<div id="gallery">
    <img class="slide" src="images/1.png" width="600" height="400" alt=""/>
    <img class="slide" src="images/2.png" width="600" height="400" alt=""/>
    <img class="slide" src="images/3.png" width="600" height="400" alt=""/>
    <img class="slide" src="images/4.png" width="600" height="400" alt=""/>
</div>

I don't want to display these images until they are loaded all and once they are loaded all I would like to present them as a slideshow (that part is not important).

The thing I cannot really understand how it works is the loading of images while being hidden. Let's assume I hide them all with display:none after $.ready, would this not prevent them from loading in some browsers? If I leave them visible, some images may appear before all of them are loaded, which is undesirable. I don't want to load them using ajax.

Once again what I am trying to do:

have the images in html, not load them with ajax
do not display them until all of them are loaded

Some advice how to achieve this? I am not interested of how to display them when all are loaded, I am interested in how to hide them while loading and that they would still load. Thank you!

score 1 · Answer 1 · answered Jun 17 '14 at 22:29

First, you need to ensure that none of the images show initially. In order to do that, you need to alter your stylesheet.

Note that just because the css is set to display: none, does not mean the browser doesn't load it. The browser still loads the image, it simply does not display it.

What you do in a case like this, in your stylesheet:

/* prevent images from being displayed before they are loaded ready */
#gallery img {
    display: none;
}

Then, with some jQuery, show the images as they are fully loaded:

jQuery(function($) {
    $('#gallery img').load(
        function() {
            $(this).show();
        }
    );
});

This would show each image as it is loaded.

OR
If you want to wait until all of them are loaded, your jQuery would be a bit different:

jQuery(function($) {
    // Get count of images
    var icount = $('#gallery img').length;
    // Initialize count to track loaded images
    var lcount = 0;
    $('#gallery img').load(
        function() {
             // If the loaded images is equal to the total images, show them all
             if (++lcount >= icount) {
                 $('#gallery img').show();
             }
        }
    );
});

OR
Finally, if you would just prefer to wait until the entire page is loaded before showing them, then use this jQuery:

jQuery(window).load(function($) {
    $('#gallery img').show();
});

Are you sure they get downloaded? Unluckily I cannot test it on IE right now but according to http://www.quirksmode.org/css/displayimg.html: *When image has display: none or is inside an element with display: none, the browser may opt not to download the image until the display is set to another value.* That really worries me. — Fygo, Jun 17 '14 at 22:44
@Fygo - pretty sure. My experience is that they do (across browsers), plus this post gives that impression also: http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading — random_user_name, Jun 17 '14 at 22:54
oh I see, Opera seemed to have problems with it but since they changed to webkit... Thanks, upvoting this. — Fygo, Jun 17 '14 at 23:31

score 0 · Accepted Answer · answered Jun 17 '14 at 22:30

0

The best easy solution to be sure that images will be loaded and will not be any problem is to:

.preload{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

And add a copy of your images' html inside preload.

answered Jun 17 '14 at 22:30

GramThanos

3,332
1
18
32

Nik Terentyev · Answer 3 · 2014-06-17T22:49:22.860

load those in javascript

(function(){
    imgURLs = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg'];
    imgs = [];
    var i = 0,
        len = imgURLs.length;
    loadAsset();

    function loadAsset(){
        if (i < len){

            imgs[i] = new Image();
            imgs[i].src = imgURLs[i];
            imgs[i].onload = function(){
                i++;
                loadAsset();
            }
        } else {
            //some init function for the slideshow
            initSlideShow();
        }
    }
})();

score 0 · Answer 4 · answered Jun 17 '14 at 23:51

You could load the images using the jQuery "Deferred" object, also known as a promise.

var promises = [];
$('#gallery .slide').each(function(){
    var promise = $.Deferred();
    $(this).load(function(){ promise.resolve();} );
    promises.push(promise);
});
$.when.apply($,promises).then(function(){
    $('#gallery .slide').show();
});

http://api.jquery.com/category/deferred-object/

JS/CSS: Preload images from the HTML file while they are hidden

4 Answers4