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

Question

假设我的 html 文档中有几个 img 标签，所有这些标签都应该显示在幻灯片中，一次显示一个图像。

<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>

我不想显示这些图像，直到它们全部加载完毕，一旦它们全部加载完毕，我想以幻灯片的形式展示它们（那部分并不重要）。

我无法真正理解它的工作原理是在隐藏时加载图像。假设我在 $.ready 之后用display:none 将它们全部隐藏，这不会阻止它们在某些浏览器中加载吗？如果我让它们可见，则可能会在所有图像加载之前出现一些图像，这是不可取的。我不想使用 ajax 加载它们。

我再次尝试做的事情：

• 将图像保存在 html 中，不要使用 ajax 加载它们

• 在全部加载之前不要显示它们

一些建议如何实现这一目标？我对如何在全部加载后显示它们不感兴趣，我对如何在加载时隐藏它们以及它们仍然会加载感兴趣。谢谢！

Answer 1

首先，您需要确保最初没有显示任何图像。为此，您需要更改样式表。

请注意，仅仅因为 css 设置为 display: none，not 是否意味着浏览器不会加载它。浏览器仍然加载图像，只是不显示它。

在这种情况下，您在样式表中做了什么：

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

然后，使用一些 jQuery，显示完全加载的图像：

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

这将在加载时显示每个图像。

或
如果你想等到 all 加载完毕，你的 jQuery 会有点不同：

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

或
最后，如果您只想等到 整个页面 加载后再显示它们，那么使用这个 jQuery：

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

Answer 2

确保图像将被加载并且不会出现任何问题的最佳简单解决方案是：

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

并在 preload 中添加图片的 html 副本。

Answer 3

在 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

您可以使用 jQuery“Deferred”对象（也称为 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/