JS / CSS：隐藏HTML文件时预加载图像

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!

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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/